时间戳

首页 > 解决方案 > CSS 中的 xx-large 和 large 有什么区别？

css - CSS 中的 xx-large 和 large 有什么区别？

问题描述

我正在阅读 CSS 中的相对和绝对大小并遇到了这个问题。

xx-large除了绝对和larger相对之外，还有什么区别？比例因子是什么意思？

在浏览器中，较大的似乎小于 xx-large。为什么？

.one{
    font-size:xx-large;
}
.two{
    font-size:larger;
}
<!DOCTYPE html>
<head>
    <title>CSS</title>
    <link rel="stylesheet" href="style.css">
</head>


<body>
  <h1 class="one">hello</h1>
  <h1 class="two">hello</h1>
</body>

</html>

标签： css

解决方案

有时larger大于xx-large，有时则相反。一个是相对大小值，另一个是绝对大小值。请参阅下面的示例以获取说明。

larger（不要与 混淆large）是一个相对大小的关键字，它将使文本的大小从当前的大小增加一步。

xx-large是一个绝对大小关键字，它将文本的大小设置为特定大小，而不管其当前大小是多少。

有关更多信息，请参阅Mozilla 的关于属性的 CSS 文档font-size。

示例 1

这里，font-sizebody 元素的 设置为 24px。

添加xx-large到段落将其大小绝对设置为 32px。

添加larger到段落中会将正文上设置的基本尺寸相对于 28.8 像素增加。

body { font-size: 24px; }
.xx-large { font-size: xx-large; }
.larger { font-size: larger; }
<p>base size</p>
<p class="xx-large">xx-large size</p>
<p class="larger">larger size</p>

示例 2

如果我们改变font-sizebody元素的设置为48px，我们可以看到这两个值的区别。

添加xx-large到段落中仍将其大小绝对设置为 32px。

但是，添加larger到段落中会相对于 57.6 像素将主体上设置的基本大小增加。

body { font-size: 48px; }
.xx-large { font-size: xx-large; }
.larger { font-size: larger; }
<p>base size</p>
<p class="xx-large">xx-large size</p>
<p class="larger">larger size</p>

推荐阅读