本文目录
什么是 CSS 单位？
CSS 单位用于定义网页上元素的尺寸。它们分为两大类：绝对单位（px、cm、mm、in、pt、pc）具有固定的物理尺寸；相对单位（rem、em、vw、vh、vmin、vmax、%）则会根据字号或视口尺寸等上下文进行缩放。
现代响应式设计在很大程度上依赖相对单位。rem 单位随根字号（通常为 16px）缩放，em 随父元素字号缩放，而视口单位（vw、vh）随浏览器窗口缩放，从而让布局在各类设备上都能自适应。
CSS 单位换算的原理
在 CSS 单位之间换算时，需要先明确基准上下文：rem 依据根字号，em 依据父元素字号，vw/vh 依据视口尺寸。大多数换算只需简单的乘法或除法即可完成。
- px 转 rem——将像素值除以根字号（默认 16px），因此当根字号为 16px 时，24px = 1.5rem
- rem 转 em——当元素继承根字号时，rem 与 em 相等；否则应乘以父元素字号与根字号的比值
- px 转 vw/vh——将像素值除以视口宽度（或高度）再乘以 100，因此在宽度为 1920px 的视口上，192px = 10vw
免费试用 —— 无需注册
换算 CSS 单位 →何时需要进行 CSS 单位换算
在现代前端开发中，CSS 单位之间的换算是一项日常工作。
- 响应式设计——将固定像素的设计稿转换为基于 rem 或 vw 的布局，使其在从手机到桌面的各种屏幕尺寸上都能优雅缩放
- 无障碍访问——使用 rem 单位可确保当用户调整浏览器默认字号时文本能正确缩放，这是无障碍设计的一项关键要求
- 设计系统令牌——将设计师给出的规格（通常以像素为单位）转换为基于 rem 的令牌，从而保持一致的间距和排版比例
常见问题
字号应该用 rem 还是 em？
大多数情况下建议使用 rem。rem 单位相对于根字号，无论嵌套多深其结果都是可预期的。而 em 单位在嵌套时会叠加（1.2em 嵌套在另一个 1.2em 中会变成 1.44 倍），可能导致意外的尺寸。只有在需要相对于父元素缩放的特定组件中，才保留使用 em。
浏览器的默认根字号是多少？
所有主流浏览器都将根字号默认为 16px。这意味着除非被 CSS 覆盖，否则 1rem = 16px。用户可以在浏览器设置中出于无障碍需要更改这一数值，这正是字号和间距应使用 rem 而非 px 对无障碍设计至关重要的原因。
什么时候应该用视口单位而不是 rem？
当元素应随浏览器窗口而非字号缩放时，请使用视口单位（vw、vh）。常见示例包括全屏主视觉区域（height: 100vh）、流式排版（用 clamp 搭配 vw）以及容器的响应式内边距。正文文本请避免使用 vw——它会忽略用户的字号偏好设置。