对于 CSS 中涉及宽度单位的任何内容,当我需要固定宽度时,我总是使用 px;当我需要相对于字体大小的宽度时,我总是使用 em。
然后我意识到 em 实际上是字体 height 的测量,而不是 width。 因此 ch 似乎更合适。
忽略 ch 是一个相对较新的 CSS 单元(较旧的浏览器可能不支持它),在指定应随字体大小缩放的任何水平长度时,最好使用 ch、em 或还有别的吗?
不要将
em
视为字体的高度或宽度,它源自字体的度量元数据,从技术上讲与字体中的各个字母,甚至特定的平均高度或宽度没有任何关系一组字母。它只是一个您知道的值,无论您在何处加载该字体,它总是相同的,这就是为什么只要您确保加载正确的字体就可以使用。
如果您指定要使用哪种字体,您可以安全地使用 em
,并且知道无论使用哪种设备/浏览器组合,您的内容始终大小相同。另一方面,如果您保留任何隐含使用的字体(例如依赖系统名称或使用“衬线”,甚至只是从不指定
<html>
或
<body>
的最上面的字体),那么您将不得不三思而后行关于使用
em
,或者任何相对单位。底线:在页面上强制使用字体,然后
em
单位就 100% 可靠,因为每个上下文中使用的字体始终保证是您设计时所针对的字体。
更新: CSS3 在这个答案大约两年后问世,重新定义了 em
的含义。根据现行规则(2017 年 4 月),
em
被定义为“无论当前
font-size
是什么”。因此,
font-size: 16px
直线意味着对于应用该规则的任何元素,
1em
对应于
16px
。