px ⇄ rem 换算

在 px、rem、em、pt、vw、vh 之间互相换算,可自定义根字号、父字号与视口尺寸,一次看全所有单位。

换算前提

换算结果

单位数值
px24
rem1.5
em1.5
pt18
vw1.6667
vh2.6667

rem 相对根元素 html 的字号,浏览器默认 16px;改了根字号,整站的 rem 会一起缩放,这是它比 px 更适合响应式的根本原因。

em 相对**父元素**的字号,会随着嵌套层层累乘——三层嵌套里写 0.8em,实际就是 0.8³。这是 em 最容易出问题的地方,能不用就不用。

vw / vh 相对视口,1vw 是视口宽度的 1%。注意移动端浏览器地址栏收起时视口高度会变,用 100vh 做全屏容易出现内容被截,现在更推荐 dvh。

pt 是印刷单位(1/72 英寸),CSS 里 1pt = 4/3 px。屏幕上的字号建议直接用 px 或 rem。

评论

登录后即可参与评论

还没有评论,来说两句吧