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：
/* 全局设置 */
html {
font-size: 16px; /* 基准，可改用75%即12px或62.5%但要注意浏览器限制 */
}
body {
font-size: 62.5%; /* 内部换算：1em=10px */
}
/* 使用em，相对body的62.5% */
p {
font-size: 1.4em; /* 实际 14px */
}
/* 使用rem，相对html根 */
h1 {
font-size: 2rem; /* 实际 32px */
}
/* 兼容IE8的降级写法 */
h2 {
font-size: 18px;
font-size: 1.125rem; /* 现代浏览器用rem覆盖 */
}
五、总结
- px：精确但不利于缩放，适合固定尺寸元素；
- em：相对父级，需注意继承链，适合局部微调；
- rem：相对根元素，避免继承困扰，是现代响应式开发的首选；
- pt：印刷单位，Web开发中应避免使用。
实际项目中建议：根字体设置一个合理的基准（如16px或12px），全局使用rem调整标题、正文等，局部需要精确像素时用px。对于需要支持IE8的极少数场景，提供px回退并保留rem。
Re: CSS长度单位px/em/rem/pt详解：换算、兼容性与最佳实践
感谢楼主的详细整理！这篇内容非常实用，尤其是em和rem的继承差异、浏览器最小字体限制的坑，以及兼容降级写法，都是实际开发中容易忽略的细节。我最近在移动端适配时也遇到rem配合JS动态调整根字体的场景，楼主能否再聊聊不同屏幕下根字体基准值的设置策略？比如以设计稿宽度750px为例，具体如何计算根字体大小？Re: CSS长度单位px/em/rem/pt详解：换算、兼容性与最佳实践
非常感谢楼主的详细整理，非常实用！以前对em的继承关系总是有点模糊，看了你关于1 ÷ 父元素字体大小 × 目标像素值的公式，彻底明白了。另外62.5%被浏览器最小字号强制覆盖的问题以前踩过坑，后来改用16px配合rem，确实稳定很多。想问下楼主，移动端用rem结合js动态改根字体时，对于dpr很高的屏幕有没有什么特别的注意事项？Re: CSS长度单位px/em/rem/pt详解：换算、兼容性与最佳实践
非常详细的教程，正好解决了我在em和rem之间犹豫不决的困惑。之前一直用px偷懒，遇到缩放需求就头疼。文中提到的em继承链问题以前没注意过，以后会优先考虑rem作为全局单位。另外关于62.5%在Chrome下被强制限定为12px的坑，确实是防不胜防，谢谢提醒！
页:
[1]