PocketPlay
EN
CSS 单位换算
按自定义根字号与视口尺寸，在 px、rem、em、pt、%、vw、vh 之间互换，并生成 clamp() 流体字号。
🔒 浏览器本地运行，文件不会上传免费 · 无需注册
参考基准
单位换算
在任意一栏输入，其余会立即同步。
常用尺寸
px → rem 对照表
| px | rem | em | pt |
|---|
clamp() 流体字号
生成的 CSS
768px模拟视口宽度
—实际字号
流体字号会在两个视口宽度之间平滑变化。
怎么用 CSS 单位换算
- 先设置根字号（没改过就是 16px）、
em和%所参照的父元素字号，以及作为参考的视口尺寸。 - 在任意单位栏里输入数字，px、rem、em、pt、%、vw、vh 以及绝对单位会同时换算出来。
- 往下滚动到 clamp() 生成器，把最小和最大字号变成一行流体 CSS。
常见问题
为什么 1rem 不一定等于 16px？
rem 相对的是 <html> 的字号，默认是 16px，但用户调大了浏览器默认字号，或者样式里写了 html { font-size: 62.5% }，它就会变。这也正是用 rem 做字号更无障碍的原因。
em 和 rem 有什么区别？
em 相对的是元素自身的字号（写在 font-size 上时相对父元素），嵌套时会层层累乘；rem 永远相对根元素，不会累乘。
clamp() 会影响无障碍吗？
只要中间那个首选值里含有 rem 这类相对单位、而不是纯 vw，就没有问题。本工具生成的公式总是把 rem 偏移量和 vw 斜率混合在一起，文字依然会跟随用户的字号设置变化。