html {
font-size: 16px;
}
div {
font-size: 18px;
}
p {
font-size: 1.5em;
}
code {
font-size: 1.2em;
}
字符串 html：
<html>
<body>
<div>
<p>
Font size here will be 27px (18 * 1.5)
</p>
</div>
<p>
Font size here will be 24px (16 * 1.5)
</p>
<code>
Font size here will be 19.2px (16 * 1.2)
</code>
</body>
</html>
3条答案
按热度按时间h9vpoimq1#
您可以在A List Apart上找到有关该公式的更多信息
字符串
如果我们假设body的默认类型大小为16 px，我们可以将每个所需的font-size值插入到这个公式中。因此，为了正确匹配我们的头部和comp，我们将目标值（24 px）除以其容器的font-size（16 px）：
型
所以header是默认body大小的1.5倍，或者1.5em，我们可以直接插入样式表。
型
在处理文本时，
em和%几乎是等价的：100%==1em50%==0.5em在设计网格时，我会直接考虑百分比（或列），而不是手工进行转换。
w41d8nur2#
在这个页面https://pxtoem.net/learn上有关于css度量单位（特别是px和em）的很好的摘要信息
这个服务还提供了一个不同css单元之间的转换器，所以你可以马上尝试它们。
EM单位（em）
em等于元素的父元素的计算font-size。例如，如果有一个div元素定义了font-size：16 px，则对于该div及其子元素，1 em = 16 px。如果没有显式定义font-size，该元素将从父元素继承它。继承继续以这种方式在祖先之间发生，直到根元素。默认字体-根元素的大小由浏览器提供。
下面是一个例子，它将帮助您了解如何使用em单位：
css：
字符串
html：
型
该页面上也有类似的代码片段，它演示了rem（root em）值，这些值与根元素大小有关。
ajsxfq5m3#
一般来说，目前的答案似乎是正确的。当使用
<table>和table-layout; fixed对表进行样式化时有一个例外。表列
如果你知道一个列需要容纳的字符数
em通常会低估宽度。在这种情况下，使用较少了解和使用的ex度量更好，更准确。如果你知道一个列中的最大字符数，将其min-width设置为ex中的最大字符数。字符串
将为第一列设置大约10个字符的空格，为第二列设置大约30个字符的空格。