速查在线工具箱CSS 长度单位速查
px、em、rem、vw 各自相对什么、为什么移动端 100vh 会溢出、clamp() 怎么写出自适应字号——一次理清长度单位。
CSS 长度单位分成两类：绝对单位（如 px、pt）不随环境变化，相对单位（如 em、rem、%、vw）按某个参照物计算。选择哪一种，本质上是在回答「我希望这个东西相对什么变化」——相对根字号做无障碍适配，还是相对视口做自适应布局。
真正容易出错的是「相对谁」这件事：em 相对父元素字号会逐层累积，rem 相对根元素不会；vh 在移动端会因为浏览器地址栏而溢出。这些坑都有确定的成因，讲清之后就能预判。
1绝对单位对照与换算
绝对单位里只有 px 是屏幕场景真正常用的，其余主要出现在印刷语境和旧代码里。CSS 规定了它们之间的固定换算关系。
| 单位 | 含义 | 与 px 的关系 |
|---|---|---|
px | CSS 像素 | 基准单位 |
pt | 点（point） | 1pt = 1/72 英寸，约等于 1.333px |
pc | 派卡（pica） | 1pc = 12pt = 16px |
in | 英寸 | 1in = 96px = 72pt = 6pc |
cm | 厘米 | 1cm ≈ 37.8px |
mm | 毫米 | 1mm = 0.1cm ≈ 3.78px |
Q | 四分之一毫米 | 1Q = 0.25mm，多见于印刷相关样式 |
CSS 规定 96px = 1 英寸，这个「CSS 像素」是逻辑单位，不等于屏幕上的物理像素。在高密度屏幕上，一个 CSS 像素会由多个物理像素渲染——这正是「二倍图」存在的原因。
2相对单位：各自相对什么
相对单位的关键在于参照物。选对参照物，才能得到想要的自适应行为。
| 单位 | 相对什么计算 | 典型用途 |
|---|---|---|
em | **当前元素**的字号（若用于 font-size 则相对父元素字号） | 组件内部的间距，随组件字号整体缩放 |
rem | **根元素**（html）的字号 | 全站统一缩放，做无障碍适配的首选 |
% | 视属性而定：宽度相对父元素宽度，行高相对自身字号 | 流式布局、相对父容器 |
vw | 视口宽度的 1% | 全宽区块、随窗口变化的字号 |
vh | 视口高度的 1% | 全屏区块、模态遮罩 |
vmin / vmax | 视口宽高中较小 / 较大的那个的 1% | 保持不随横竖屏翻转而失真的比例布局 |
ch | 当前字体中数字 0 的宽度 | 限制文本行宽，如 max-width: 60ch 适合阅读 |
ex | 当前字体的小写 x 高度 | 较少使用，垂直对齐微调 |
lh / rlh | 当前元素 / 根元素的行高 | 按行高做垂直间距，与文字排版天然对齐 |
em 的「累积效应」是新手最常见的意外：父元素设了 `font-size: 1.2em`，子元素又设 `1.2em`，实际会变成 1.44 倍。需要可靠缩放时用 rem 更省心。
3rem 与根字号：无障碍适配的正确做法
rem 的价值在于「用户改了浏览器默认字号，整个页面跟着缩放」。这一点直接关系到可访问性。
- 默认根字号
- 浏览器默认
16px，所以1rem = 16px、1.5rem = 24px - 为什么不用 px 写全站
- 用 px 固定字号时，用户在浏览器里调大默认字号，页面文字不会跟着变大——对有视力需求的用户很不友好
- 常见做法
- 根元素不设固定 px；正文用 rem 或直接继承；间距用 rem。这样用户改默认字号时整站等比缩放
- html 上设 `font-size: 62.5%` 的写法
- 把 1rem 变成 10px，便于用
1.6rem表示 16px。代价是与浏览器默认值脱钩，用户改默认字号时不再生效，可访问性变差，已不推荐 - 媒体查询同样受影响
- 在媒体查询里用 em 时，参照的是浏览器默认字号而不是根元素设置的字号，这与很多人以为的不同
4视口单位与移动端的 100vh 陷阱
视口单位很强大，但在移动端有一个绕不开的问题：地址栏会伸缩，视口高度会变化。
- `100vh` 的问题
- 移动端浏览器把
vh固定为「地址栏收起时的最大高度」，所以页面加载时地址栏还在，100vh的区块就会比可见区域高，出现滚动条或底部被裁 - 解法一：新视口单位
dvh（动态视口高度）随地址栏实时变化，svh（最小）与lvh（最大）分别是保守与激进的两端。用100dvh可解决溢出问题- 解法二：传统方案
- 用
height: 100%并让html与body都有确定高度，或配合-webkit-fill-available之类的兼容写法 - `vw` 的另一类问题
- 页面出现纵向滚动条时，
100vw会比可用宽度多出滚动条的宽度，导致横向溢出。需要全宽时用width: 100%更稳 - 横竖屏切换
vmin/vmax能避免布局在旋转后完全失真，适合需要保持比例的元素
5clamp()：一行写出自适应尺寸
clamp(最小值, 理想值, 最大值) 让尺寸在区间内随视口平滑变化，是目前做响应式字号与间距最省事的写法。
| 写法 | 效果 | 说明 |
|---|---|---|
font-size: clamp(1rem, 2.5vw, 1.5rem) | 字号在 16px 到 24px 之间随视口缩放 | 小屏取下限、大屏取上限，中间平滑过渡 |
width: clamp(280px, 50%, 640px) | 宽度自适应但有上下限 | 避免过窄难读或过宽难扫视 |
gap: clamp(12px, 2vw, 24px) | 间距随视口变化 | 同一套规则适配多种屏宽 |
min() / max() | 取较小 / 较大值 | width: min(100%, 800px) 是很常见的组合 |
| 计算混用 | calc(100% - 2rem) | 可与 clamp 嵌套使用，表达复杂约束 |
| 字体配合 | 搭配 text-wrap: balance 等属性 | 让标题换行更均衡，减少孤字 |
看完就能用的站内工具
全部工具总览 →CSS单位换算工具，支持px、em、rem、vw、vh、pt等CSS长度单位实时互转，前端布局适配必备，可自定义根字体与视口尺寸。
输入最小值、最大值和视口宽度，自动生成clamp()流式响应式CSS代码，适用于字体、间距、内边距等场景
在线检测网页在不同设备屏幕尺寸下的自适应效果，支持手机、平板、桌面等常见分辨率预览
CSS Flexbox生成器 - 可视化配置flex-direction、justify-content、align-items等属性，实时预览生成CSS代码
可视化编辑border-radius四角独立圆角半径，支持联动/独立模式切换，px/%单位，8种预设形状，一键复制简化CSS代码
关于「CSS 长度单位速查」的常见问题
px 和 rem 该用哪个？
取决于你希望这个尺寸相对什么变化。px 是固定值，不随任何环境变化，适合边框、细线、图标这类不应缩放的细节；rem 相对根元素字号，用户调整浏览器默认字号时整站会等比缩放，适合字号、间距、容器尺寸。推荐的做法是正文与间距用 rem，配合少量 px 处理不该缩放的细节。这样既保留设计的稳定性，又满足无障碍要求——只用 px 写全站时，需要放大文字的读者会发现页面完全不响应他们的设置。
em 和 rem 有什么区别？
参照物不同：em 相对当前元素的字号计算（用在 font-size 属性上时则相对父元素字号），rem 相对根元素（html）的字号计算。这意味着 em 会「逐层累积」——父元素设了 1.2em、子元素又设 1.2em，实际就会变成 1.44 倍，嵌套越深偏差越大。rem 始终以根字号为基准，不会累积，因此更适合做全站统一的缩放。em 仍有其价值：组件内部的间距用 em 可以随组件字号整体缩放，保持比例关系。
为什么移动端 100vh 会导致页面溢出或出现滚动条？
因为移动端浏览器的地址栏会伸缩，但 vh 被定义为「地址栏收起时的最大视口高度」。页面刚加载时地址栏通常还在展开状态，此时可见区域比 100vh 小，于是 100vh 的区块就超出了屏幕，产生滚动或被裁切。解决办法是改用新的视口单位：100dvh 会随地址栏动态变化，100svh 取最小高度（最保守），100lvh 取最大高度。也可以沿用传统方案，让 html 与 body 都有确定高度再用 height: 100%。
用 62.5% 设置根字号的做法还能用吗？
技术上仍然可用，但已不推荐。这种做法把根字号设为 10px，好处是换算方便（1.6rem 就是 16px）。问题在于它切断了与浏览器默认字号的关联——用户如果把默认字号调大，页面不会跟着变化，而这正是 rem 存在的意义。这会直接损害可访问性。如果只是嫌换算麻烦，可以用计算直接写目标值（如 1.25rem 表示 20px），或借助构建工具做单位换算，不必牺牲用户的字号设置。
继续查：相关内容
全部速查 →内容说明：本页速查数据由本站自行整理，事实性内容以对应官方规范与文档为准，未复制第三方速查表或百科的表述。数据最后核对日期：2026-10-05。若发现错误或已更新的标准，欢迎通过页脚反馈入口告知。