分类: 开发工具
CSS 单位换算器
换算 px、rem、em、%、vw 和 vh
输入一个 px、rem、em、百分比、vw 或 vh 数值，再给出它所依赖的基准字号、视口和容器，就能得到换算成其他所有单位后的同一个长度。
换算基于你输入的数值在页面里完成，不会发送到任何地方。
本页的所有处理都在浏览器中完成，不会上传任何内容。
这个工具能做什么
px 换算成 rem 到哪里都是同一套算法，但百分比、vw 和 vh 不是——它们取决于容器尺寸或视口，而这两者会随页面变化。这个工具先把这些前提问清楚，算出的数字才是页面上真正会渲染出来的结果，而不是凭空假设根字号是 16px。rem 和 em 在这里按同一种方式处理，都由你填写的基准字号换算得出，因为没有页面上真实存在的父元素，也就没有另一个父级尺寸可以把两者区分开。试着改一下基准字号，就能看到访客放大字体后，所有 rem 和 em 数值会一起怎样变化。
使用方法
- 输入数值并选择要换算的原单位。
- 设置对应的基准字号、视口宽高和容器尺寸。
- 查看同一个长度换算成其他所有单位后的结果。
隐私说明
本工具完全在你的浏览器中运行。输入的内容不会被上传、保存或分享，关闭标签页即随之消失。
常见问题
- 为什么 rem 和 em 算出来的结果一样？
- 因为两者都由基准字号换算而来。rem 本该始终用根元素的字号，em 用父元素的字号，但这个工具没有页面可以读取真实的父级尺寸，所以把你填写的基准字号同时当作两者使用。
- 容器尺寸有什么用？
- 它是百分比的参照。百分比只有相对某个量才有意义，这里那个量就是你填写的容器尺寸。
- 会有内容发送到服务器吗？
- 不会。换算基于你输入的数值，全部在页面里算出。