Question 1

rem 和 em 有什么区别？

Accepted Answer

rem（root em）相对于根元素（html）的字号计算，而 em 相对于当前元素或父元素的字号计算。在实际开发中，rem 更可预测，因为它不受嵌套层级影响。例如根字号为 16px 时，1rem = 16px；如果父元素字号为 20px，则子元素中 1em = 20px。

Question 2

vw/vh 和百分比 % 有什么区别？

Accepted Answer

vw/vh 始终相对于视口（浏览器可视区域）的宽高，1vw = 视口宽度的 1%。而 % 单位相对于父元素的对应属性值，例如 font-size 的 % 相对于父元素字号，width 的 % 相对于父元素宽度。在响应式布局中，vw 更适合做全屏适配。

Question 3

为什么 rem 适配方案比 px 更好？

Accepted Answer

rem 适配方案可以让页面元素根据根字号等比缩放，实现不同屏幕尺寸下的自适应布局。通过 JavaScript 动态设置 html 元素的 font-size，可以让同一套 CSS 在手机、平板、桌面端都获得良好的显示效果。相比固定的 px 值，rem 方案更灵活、维护成本更低。

Question 4

pt、cm、mm、in 这些物理单位在网页中有用吗？

Accepted Answer

pt（点）、cm（厘米）、mm（毫米）、in（英寸）主要用于打印样式（@media print）中，可以精确控制打印输出的物理尺寸。例如设置 @page 规则的页边距时常用 cm 或 mm。在屏幕显示中，这些单位会根据设备 DPI 被转换为像素值（默认 96 DPI），但实际显示效果因设备而异。

CSS 单位转换工具

常见问题