px ⇄ rem 换算
在 px、rem、em、pt、vw、vh 之间互相换算,可自定义根字号、父字号与视口尺寸,一次看全所有单位。
换算前提
换算结果
| 单位 | 数值 | |
|---|---|---|
| px | 24 | |
| rem | 1.5 | |
| em | 1.5 | |
| pt | 18 | |
| vw | 1.6667 | |
| vh | 2.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。
评论
还没有评论,来说两句吧