使用你自己的基础字体大小和视口尺寸,即时在 px、rem、em、pt、vw、vh 和 % 之间转换——不用再去猜 1.5rem 到底相当于多少像素。
CSS 支持多种不同的尺寸单位——绝对单位如 px 和 pt,以及相对单位如 rem、em、vw、vh 和 %。相对单位对于响应式、无障碍设计至关重要(rem 尤其能尊重用户浏览器的字体大小偏好设置),但在脑海中进行单位换算实际上相当困难,因为结果取决于上下文:根字体大小、当前元素的字体大小,或视口尺寸。
这款转换器会替你完成这些计算:设置你的基础字体大小、视口尺寸以及要转换的数值,即可立即看到在其他每个单位下的等效值——无论是将设计稿的像素测量值转换为响应式的 rem/vw 值,还是仔细核对某条现有 CSS 规则在屏幕上实际渲染出的效果,都非常有用。
在基础字体大小为 16px 时,1.5rem 转换为 24px。在视口宽度为 1440px 时,5vw 转换为 72px。