01
核对项目的字号与视口
rem 使用根字号，em 使用填写的父级字号；vw 与 vh 分别使用视口宽、高，而不是自动读取打开工具的设备。
HTML / CSS / 前端代码
CSS 单位换算把设计尺寸变成可核对的响应式值
输入一个长度，或切换到 clamp、calc 与宽高比计算。
CSS 单位换算
输入
数值仅在当前浏览器计算，不会上传。
结果
px
24pxrem
1.5remem
1.5emvw
1.6667vwvh
2.6667vh选项
计算完成。
拿到标注为 24px 的设计稿，却需要在样式中写 rem 或 vw 时，CSS 单位换算不能只靠“默认 16px”。根字号控制 rem，父级字号控制 em，视口宽高又分别控制 vw 与 vh；先把这些基准填成项目实际值。
本页将 px rem em 转换、vw vh 换算和 CSS clamp 计算器放在同一工作台。CSS 单位换算的基准也用于 calc() 的受限求值，让两个结果可以相互核对；切换模式时，各自的草稿输入会保留。
为什么用 CSS 单位换算？
每个相对单位所依赖的基准都能看见。
同一长度，五种表示
CSS 单位换算同时列出 px、rem、em、vw、vh。只改根字号时 rem 会变，只改父级字号时 em 会变；结果清楚对应当前填入的上下文，不冒充目标页面的真实计算样式。
从两个锚点推导流体区间
为 375px 和 1440px 视口各给一个字号，工具计算中间的 vw 斜率并生成 clamp()。再输入 768px 预览宽度，就能看到这一点的尺寸和它是否已经触及上下限。
先校准基准，再检查输出
02
留意自动计算的时机
修改输入后等待 350 毫秒会自动更新；关闭开关后可按 Ctrl/Cmd+Enter 手动执行。旧结果一旦过期就不能复制。
03
检查端点和比例
clamp 模式可用中间视口验证线性结果；宽高比模式给出约分后的比例和目标宽度对应的高度，复制前可直接核对。
从单值换算到流体尺寸
带上下文的五单位对照
输入 px、rem、em、vw 或 vh 中的一种长度，同屏读取其余单位；没有后缀的数字按 px 处理。
clamp() 流体值生成
四个端点数值决定一条直线。可选 rem 或 px 输出，并查看指定视口下的实际尺寸。
受限 calc() 求值
支持五种长度单位、括号及基础四则运算。长度相加减可以求像素值，乘除只能搭配无单位数。
宽高比推算
由整数宽高约分比例，输出 aspect-ratio 声明，再按目标宽度算出等比例高度。
这些值什么时候不能直接套用
- 相对单位需要明确基准
- rem、em、vw、vh 分别依赖根字号、父级字号、视口宽与高。CSS 单位换算不会读取另一个网站的计算样式。
- calc() 只算确定的子集
- 这里拒绝百分比、var()、env()、未知单位与维度不兼容的算式；缺少包含块或级联信息时，不会猜一个 px 结果。
- clamp 锚点必须有序
- 起点视口必须小于终点，最小尺寸不能大于最大尺寸。负尺寸和非有限数值会报错，不会生成看似可用的 CSS。
- 比例推算不处理图片文件
- 原始宽高与目标宽度须为正整数。结果仅包含数学比例、目标高度和 CSS 声明，不会裁切或缩放图片。
CSS 单位换算常见问题
px 怎么换算成 rem？
用 px 数值除以根字号即可。例如根字号为 16px 时，24px 等于 1.5rem；项目的根字号不同就先调整基准。
em 和 rem 的计算基准有什么区别？
rem 参考根元素字号，em 参考当前上下文提供的父级字号。嵌套组件改变字号时，em 会变化而 rem 可以保持不变。
vw 和 vh 怎么换算成像素？
1vw 是视口宽度的 1%，1vh 是视口高度的 1%。先填写宽高，再经 px 换算；目标视口改变，结果也会改变。
如何用两个视口宽度生成 clamp()？
输入两个视口宽度，以及各宽度对应的尺寸。工具根据两点求 vw 斜率，生成 clamp()，还能预览中间视口的结果。
calc() 能计算哪些带单位的表达式？
只支持已列出的单位与基础算术，例如 calc(1rem + 2vw)。百分比、变量和依赖浏览器环境的函数不会被强行换成像素。
还有疑问？