CSS长度单位px/em/rem/pt详解：换算、兼容性与最佳实践

脚本专家

在前端开发中，选择合适的字体和尺寸单位直接影响页面在不同设备、浏览器下的显示效果与用户体验。本文将系统梳理CSS中常用的长度单位，重点分析px、em、rem三者在实际开发中的换算逻辑、继承行为及兼容性问题，并给出实用的设置建议。

一、长度单位的两大类别
CSS长度单位可分为绝对单位与相对单位。绝对单位有固定物理值，如cm（厘米）、mm（毫米）、in（英寸）、pt（点，1英寸=72点）、pc（派卡，1派卡=12点）。这些单位主要用于印刷场景，在Web开发中很少使用，因为它们不利于适配不同屏幕分辨率。
相对单位则根据参考值动态计算，常见的有px、em、ex、rem。其中ex（小写字母x高度）实际使用较少，一般视为0.5em。

二、核心单位详解
1. px（像素）
px是相对于显示器屏幕分辨率的相对长度单位。用px设置字体大小稳定精确，但存在一个长期问题：IE浏览器（尤其低版本）无法缩放以px为单位的字体，而Firefox等现代浏览器则支持缩放。为保证用户体验，社区推荐优先使用em或rem。

2. em（当前元素字体倍数）
em是相对于父元素字体大小的相对单位。例如父元素font-size为16px，则子元素1em=16px。任意未经修改的浏览器默认字体高均为16px，因此默认基准为1em=16px。
为简化换算，常见做法是在body选择器中声明font-size:62.5%;，此时1em=16px×62.5%=10px，那么10px=1em、12px=1.2em，换算只需将原px数值除以10即可。
注意：em值会继承父级，计算公式为：1 ÷ 父元素字体大小 × 需要转换的像素值 = em值。例如父元素字体12px，想要子元素14px，则1 ÷ 12 × 14 ≈ 1.167em。这种逐层继承可能导致放大/缩小的连锁反应。

3. rem（根元素相对单位）
rem是CSS3新增的属性，全称为root em。与em不同，rem只相对于HTML根元素（html标签）的字体大小。无论嵌套多少层，1rem始终等于根元素的字体大小，彻底避免em的复合继承问题。
若未在html元素上设置font-size，浏览器默认1rem=16px。一旦设置，如html{font-size:20px;}，则1rem=20px。通过修改根元素即可成比例缩放全局字体。
兼容方面，IE9及以上版本均支持rem，IE8及以下不支持。对于老版本，可提供一个px单位的回退声明（例如先用px声明，再用rem覆盖）。

三、常见注意事项
- 当html根字体设置为62.5%或10px时，部分浏览器若默认最小字体限制为12px（如Chrome、IE的低版本），实际渲染时会自动将根字体强制提升为12px，导致换算失效。因此将html字体设为62.5%时，实际可能无法得到10px的预期。建议使用百分比值如75%（12px），或者直接设置明确的px值（如12px以上）以避免此问题。若确实需要更小比例，可考虑结合rem与px回退，但需注意体验。
- 对于IE浏览器（尤其IE6/7），无法缩放px单位字体。为保证可访问性，推荐在非必须精确对齐的场景下优先使用rem或em。
- 移动端适配中，rem常结合JavaScript动态调整根字体大小实现等比缩放，此方案成熟且广泛使用。

四、代码示例片段
以下演示如何在CSS中使用em和rem：

2. /* 全局设置 */
3. html {
4.   font-size: 16px; /* 基准，可改用75%即12px或62.5%但要注意浏览器限制 */
5. }
6. body {
7.   font-size: 62.5%; /* 内部换算：1em=10px */
8. }
10. /* 使用em，相对body的62.5% */
11. p {
12.   font-size: 1.4em; /* 实际 14px */
13. }
15. /* 使用rem，相对html根 */
16. h1 {
17.   font-size: 2rem; /* 实际 32px */
18. }
20. /* 兼容IE8的降级写法 */
21. h2 {
22.   font-size: 18px;
23.   font-size: 1.125rem; /* 现代浏览器用rem覆盖 */
24. }

复制代码

五、总结
- px：精确但不利于缩放，适合固定尺寸元素；
- em：相对父级，需注意继承链，适合局部微调；
- rem：相对根元素，避免继承困扰，是现代响应式开发的首选；
- pt：印刷单位，Web开发中应避免使用。
实际项目中建议：根字体设置一个合理的基准（如16px或12px），全局使用rem调整标题、正文等，局部需要精确像素时用px。对于需要支持IE8的极少数场景，提供px回退并保留rem。

热心网友3

感谢楼主的详细整理！这篇内容非常实用，尤其是em和rem的继承差异、浏览器最小字体限制的坑，以及兼容降级写法，都是实际开发中容易忽略的细节。我最近在移动端适配时也遇到rem配合JS动态调整根字体的场景，楼主能否再聊聊不同屏幕下根字体基准值的设置策略？比如以设计稿宽度750px为例，具体如何计算根字体大小？