CSS 单位换算
CSS 单位参考与换算：px / em / rem / % / vw / vh / vmin / vmax / ch / ex / lh / rlh / cm / mm / in / pt / pc / q / deg / rad / turn / s / ms / dpi / dpcm / dppx / fr，按根字号与父字号换算，并标明哪些结果依赖上下文。
浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。
换算
换算上下文
em 与 % 依赖父字号，rem 与 rlh 依赖根字号，vw / vh 依赖视口尺寸，ch / ex 依赖字体度量，lh 依赖行高。绝对单位（px / in / cm / mm / q / pt / pc）之间换算与上下文无关。
结果
| 单位 | 值 | 说明 |
|---|---|---|
| px | 16 | 与上下文无关 |
| in | 0.166667 | 与上下文无关 |
| cm | 0.423333 | 与上下文无关 |
| mm | 4.233333 | 与上下文无关 |
| q | 16.933333 | 与上下文无关 |
| pt | 12 | 与上下文无关 |
| pc | 1 | 与上下文无关 |
| em | 0.8 | 依赖上下文 |
| rem | 1 | 依赖上下文 |
| % | 80 | 依赖上下文 |
| vw | 1.25 | 依赖上下文 |
| vh | 2.222222 | 依赖上下文 |
| vmin | 2.222222 | 依赖上下文 |
| vmax | 1.25 | 依赖上下文 |
| ch | 1.6 | 依赖上下文 |
| ex | 1.6 | 依赖上下文 |
| lh | 0.533333 | 依赖上下文 |
| rlh | 0.666667 | 依赖上下文 |
单位参考
| 单位 | 维度 | 说明 | 依赖 |
|---|---|---|---|
| px | 长度 | 像素 · CSS 像素，规范里 1in 固定等于 96px，是其他所有长度换算的基准。 | 无（绝对单位） |
| in | 长度 | 英寸 · 1in = 96px = 2.54cm。 | 无（绝对单位） |
| cm | 长度 | 厘米 · 1cm = 96/2.54px ≈ 37.7953px。 | 无（绝对单位） |
| mm | 长度 | 毫米 · 1mm = 1/10cm ≈ 3.7795px。 | 无（绝对单位） |
| q | 长度 | 四分之一毫米 · 1Q = 1/40cm ≈ 0.9449px，常用于印刷排版。 | 无（绝对单位） |
| pt | 长度 | 点 · 1pt = 1/72in = 96/72px ≈ 1.3333px，屏幕上的 pt 与印刷点数无关。 | 无（绝对单位） |
| pc | 长度 | 派卡 · 1pc = 12pt = 16px。 | 无（绝对单位） |
| em | 长度 | 相对父元素字号 · 1em 等于当前元素继承到的 font-size；用在 font-size 上时相对父元素字号，用在 margin 上则相对自身字号，容易叠加。 | 父字号 |
| rem | 长度 | 相对根字号 · 1rem 等于根元素（html）的 font-size，默认 16px，不受中间层级影响。 | 根字号 |
| % | 长度 | 百分比 · 百分比相对「父元素的同名属性」：字号相对父字号，宽度相对父宽度，所以同一个 50% 在不同属性里含义不同。 | 父字号 |
| vw | 长度 | 视口宽度 1% · 1vw = 视口宽度 ÷ 100，视口包含滚动条时结果会随之变化。 | 视口尺寸 |
| vh | 长度 | 视口高度 1% · 1vh = 视口高度 ÷ 100；移动端浏览器工具栏会让「视口高度」在滚动中变化，见视口单位工具。 | 视口尺寸 |
| vmin | 长度 | 视口较小边 1% · 1vmin = min(视口宽, 视口高) ÷ 100，横竖屏切换时更稳定。 | 视口尺寸 |
| vmax | 长度 | 视口较大边 1% · 1vmax = max(视口宽, 视口高) ÷ 100。 | 视口尺寸 |
| ch | 长度 | 数字 0 的宽度 · 1ch 是当前字体里 “0” 的宽度，用于按字符数限制行宽；具体数值取决于字体，浏览器里常近似为字号的 0.5 倍。 | 字体度量（字符宽度 / x 高度） |
| ex | 长度 | 小写 x 高度 · 1ex 是字体的小写 x 高度，通常约为字号的一半，随字体差异很大。 | 字体度量（字符宽度 / x 高度） |
| lh | 长度 | 当前行高 · 1lh 等于当前元素的 line-height 计算值，用来做与行高对齐的间距最直观。 | 行高 |
| rlh | 长度 | 根元素行高 · 1rlh 等于根元素的 line-height，不受当前元素影响。 | 根字号、行高 |
| deg | 角度 | 度 · 整圆 360deg，transform 与渐变里最常用。 | 无（绝对单位） |
| rad | 角度 | 弧度 · 整圆 2π rad ≈ 6.2832rad，1rad = 180/π deg ≈ 57.2958deg。 | 无（绝对单位） |
| turn | 角度 | 圈 · 1turn = 360deg，写「转一圈」的动画最清楚。 | 无（绝对单位） |
| s | 时间 | 秒 · 1s = 1000ms，transition / animation 的默认单位。 | 无（绝对单位） |
| ms | 时间 | 毫秒 · 1ms = 0.001s。 | 无（绝对单位） |
| dpi | 分辨率 | 每英寸点数 · 1dpi = 1/2.54 dpcm，1dppx = 96dpi；媒体查询里建议直接用 dppx。 | 无（绝对单位） |
| dpcm | 分辨率 | 每厘米点数 · 1dpcm = 2.54/96 dppx ≈ 0.0265dppx。 | 无（绝对单位） |
| dppx | 分辨率 | 每像素点数 · 设备像素比，1dppx = 96dpi；Retina 屏通常是 2dppx。 | 无（绝对单位） |
| fr | 弹性份额 | 网格剩余空间份额 · fr 只用于 grid 的轨道尺寸，按剩余空间比例分配，无法与任何长度单位换算。 | 无（绝对单位） |
这个工具能做什么
- 把设计稿上的 px 换成 rem / em：填入根字号与父字号，直接拿到 16px = 1rem、16px = 0.8em（父字号 20px）这类换算结果。
- 写响应式字号时先算 vw 值：已知视口 1280px，16px 对应 1.25vw，避免手算百分比出错。
- 核对单位含义：ch 到底多宽、ex 与 lh 什么时候用、1Q 是多少 px、dpcm 和 dppx 怎么换，参考表里都有依赖说明。
- 排查「为什么字号越嵌套越大」这类问题：em 与 % 会相对父元素叠加，工具会明确标注哪些结果依赖父字号。
示例
输入
数值 16、源单位 px、目标单位 rem，根字号 16px、父字号 20px、视口 1280 × 720
输出
16px = 1rem（依赖根字号）；同一数值换成 em 是 0.8em（依赖父字号）、换成 % 是 80%、换成 vw 是 1.25vw、换成 cm 是 0.423333cm（与上下文无关）
px 与 cm 之间属于绝对长度换算，结果与任何上下文无关，因此标记为「与上下文无关」。
常见问题
为什么换算结果要标「依赖上下文」？
CSS 里只有绝对长度（px、in、cm、mm、q、pt、pc）有固定数值。em 取决于父元素字号、rem 取决于根字号、% 取决于父元素同名属性、vw / vh 取决于视口、ch / ex 取决于字体度量、lh / rlh 取决于行高。同一个 2em 在不同上下文里 px 值不同，所以这里把依赖项一并列出。
em 和 rem 到底差在哪？
rem 只认根元素（html）的字号，永远不受嵌套层级影响；em 认当前元素的字号，而字号本身又常常是相对父元素声明的，于是层层相乘。做间距、圆角这类需要稳定数值的地方用 rem，做「跟字号成比例」的地方（例如图标与文字对齐）用 em。
屏幕上的 pt、cm、in 是真实物理尺寸吗？
不是。CSS 规定 1in = 96px，所以 pt、cm、mm 只是按这个比例换算出来的 CSS 像素，跟打印出来的物理长度无关；真正打印时浏览器还会按设备分辨率重新映射。要精确控制打印尺寸建议用 @page 与 mm。
为什么 fr 不能换算？
fr 表示「剩余空间的一份」，只在 grid 的轨道尺寸里有效，它的像素值取决于同一条 grid-template 里其他轨道占用多少空间，脱离布局上下文就没有确定值，因此工具会直接拒绝换算。
视口宽高按哪个值填？
填你调试时实际看到的布局视口尺寸（含滚动条影响的宽度），vw 就是它的 1%。注意移动端浏览器地址栏收起/展开时视口高度会变化，vh 的 px 值随之改变，这类问题可以用 svh / lvh / dvh 解决。
关键词：css unitspx to rempx to emvw vhunit convertercss 单位单位换算px 转 remem 换算视口单位前端工具换算