这取决于你现有的样式表,但它可能不会很快我害怕(假设你希望网站在完成后看起来一样).
当文本的大小以像素为单位时,文本的可视大小将与您在CSS中放置的大小相同.例如,CSS p {font-size: 12px;}将导致所有<p>标签的字体大小为12像素.
但是,当文本大小为ems时,视觉大小是相对于其最近祖先的字体大小计算的.
所以,如果你有以下CSS:
body {font-size: .625em;}
p {font-size: 1.2em;}
.header {font-size: 1.5em;}
以下HTML:
<body>
<p>Paragraph</p>
<div class="header>
<p>Paragraph inside header</p>
</div>
</body>
然后,视觉字号第一段落将是1.2(段落的尺寸)×0.625(身体的字体大小)×16个像素(的所有现代浏览器的默认根字体大小)= 12个像素.
但视觉大小第二段落将是1.2(段落的大小)×1.5(.header的大小)×0.625×16像素= 18个像素.
如果你没有很多不同字体大小的HTML元素互相嵌套,那么你没问题.但是你需要在HTML中检查自己 - 从单独的样式表中可能很难分辨出来,特别是如果它是一个大网站.
在方法方面,当在ems中调整字体大小时,如果您网站的设计没有太多不同的字体大小,那么这是最简单的.我更喜欢将<body>元素设置为最常用的字体大小,例如
body {
font-size: .75em;/* 12px */
}
然后你只需要在需要时改变,例如
h2 {
font-size: 1.5em; /* 16px */
}
否则,当嵌套发生时,您可以最终调整大小并调整大小.这对于例如<li>s来说尤其令人讨厌.
当然,只有当网站的设计不包含许多不同的字体大小时,此方法才有效.
有些人设置body为0.625em因为等于10px(16×0.625 = 10),这意味着对于没有祖先设置字体大小的元素,1em= 10px,1.1em= 11px等等.就个人而言,我认为这会增加复杂性,但我从未做过比较.
无论哪种方式,我发现在每次使用后将预期的可视字体大小放在注释中真的很有帮助font-size,如上所述.这样,您就会记住元素在HTML中重新嵌套时的字体大小.