CSS单位换算器（px / rem / em / vh / vw）

为什么使用rem而不是px

浏览器默认从16px开始，但低视力用户通常会在浏览器设置中调大默认字体大小。使用rem设置的文本会随该设置放大，而使用px设置的文本不会。页面缩放会同时放大两者，但许多读者依赖的是字体大小设置；WCAG的调整文本标准要求文本在放大到200%时仍能正常缩放而不丢失内容。请使用rem设置字体大小及其周围间距，并将px留给细线和边框。

em列和嵌套

em相对于元素自身的字体大小；但对于font-size本身，它相对于父元素的字体大小。这里的em值假设父元素采用根字号，这只在顶层成立。在0.875em元素内再次使用0.875em，得到的是12.25px而不是14px，缩小效果会不断叠加。这就是rem更适合作为默认值的原因，而em适合用于应随组件文本缩放的间距。

62.5%的基准和视口单位

设置html { font-size: 62.5% }后，1rem等于10px，计算会更简单；请输入10作为基准字号以匹配此设置。它会缩小所有其他使用rem设置的内容，包括第三方组件，因此请再次为body设置易读的字号。

vw和vh数值假设视口为1440 × 900。在手机上，浏览器工具栏显示时，100vh可能会高于可见区域；100svh和100dvh才是会考虑这一点的单位。

使用方法

1. 输入像素值（px）和根字号（默认16px）。
2. 查看计算出的rem、em、vw和vh值。
3. 复制可直接使用的CSS代码片段，或查看比例表。

隐私与限制

在客户端JavaScript中即时运行。