CSS长度单位详解：px、em、rem、vw、vh等用法与换算指南

CSS中的长度单位分为绝对单位和相对单位，直接影响页面布局与响应式适配。本文系统梳理px、in、cm、mm、pt、pc等绝对单位，以及em、rem、ex、ch、vw、vh、vmin、vmax、%、fr等相对单位的定义、换算关系与适用场景，帮助开发者在不同设备与布局需求下做出合理选择。

在CSS中，长度单位决定了元素尺寸、间距和字体大小的计算方式。绝对单位固定不变，相对单位则随上下文动态变化。理解各类单位的换算规则与适用场景，是构建响应式布局、适配多端设备的基础。

绝对长度单位的定义与换算

绝对长度单位表示固定的物理尺寸，不会因父元素或视口变化而改变。在屏幕显示中，它们最终都会被浏览器转换为像素（px）进行渲染。

px（像素）：相对于屏幕分辨率的度量单位，是Web开发中最常用的单位。Windows默认分辨率为96像素/英寸，macOS通常为72像素/英寸。JavaScript中的尺寸单位也默认使用px。
in（英寸）：1in = 2.54cm = 96px。
cm（厘米）：1cm ≈ 37.8px。
mm（毫米）：1mm = 0.1cm ≈ 3.78px。
pt（点）：1pt = 1/72in ≈ 96/72px ≈ 1.333px。常用于打印样式。
pc（派卡）：1pc = 12pt。

以下为绝对单位的CSS示例：

div { width: 200px; }

div { width: 2in; }

div { width: 20cm; }

div { width: 200mm; }

div { width: 20pt; }

div { width: 20pc; }

完整示例与渲染效果：

绝对长度单位

这是 16px 的字体

这是 2pt 的字体

这是 3pc 的字体

绝对长度单位渲染效果

相对长度单位的值依赖于其他元素的属性（如字体大小、父元素尺寸或视口大小），非常适合响应式布局与动态适配。

em：相对于当前元素或父元素的字体大小。若未设置，则继承浏览器默认字体（通常为16px）。em会随font-size变化，但不随font-family改变。例如：父元素12px，子元素1.5em，则子元素为18px；若再嵌套一层1.5em，则为27px。
rem：始终相对于根元素（html）的字体大小，避免em的级联累积问题，使用更简单可控。
ex：相对于字符“x”的高度，通常为字体尺寸的一半。改变font-family时，ex值会随之变化。
ch：相对于数字“0”的宽度。常用于等宽字体排版或限制文本容器宽度。

div { width: 40em; }

div { width: 40rem; }

div { width: 40ex; }

div { width: 40ch; }

vw：视口宽度的1%。所有元素共享同一基准，不受父元素宽度影响。
vh：视口高度的1%。
vmin：取vw和vh中的较小值，适合保持元素在横竖屏切换时不溢出。
vmax：取vw和vh中的较大值。
%：相对于父元素对应属性的值。若父元素未设置具体尺寸，百分比高度可能计算为0。
fr：Grid布局中的分数单位，用于按比例分配剩余空间。例如：grid-template-rows: 30px 1fr 2fr; 表示第一行30px，第二行占剩余1/3，第三行占剩余2/3。

div { width: 40vw; }

div { width: 40vh; }

div { width: 40vmin; }

div { width: 40vmax; }

div { width: 40%; }

grid-template-rows: 30px 1fr 2fr;

相对单位示例与渲染效果：

相对长度单位

这是 16px 的字体

这是 2em 的字体

x：这是 3ex 的字体

0：这是 4ch 的字体

相对长度单位渲染效果

屏幕分辨率影响显示效果：不同分辨率下像素点大小不同。低分辨率下px单位元素可能显得更大但更模糊。
所有单位最终转为px：无论是绝对单位还是相对单位，浏览器在渲染时都会将其转换为px。因此，设置3cm并不会在所有设备上保持真实物理3cm。
pt适用于打印样式：在@media print中，pt能保持打印尺寸一致，因为打印设备的DPI相对固定。但在屏幕显示中，pt仍会按浏览器DPI（如Firefox默认96）转换为px。
em与rem的选择：em适合需要级联缩放的组件（如按钮内边距随字体变化），rem适合全局统一基准的布局（如页面间距、字体大小）。避免多层嵌套使用em导致尺寸失控。
vw/vh在移动端的注意事项：移动端浏览器地址栏和工具栏会动态改变视口高度，vh可能引发布局跳动。可结合dvh、svh、lvh等现代视口单位或使用JS动态计算。