这是我参与8月更文挑战的第1天,活动详情查看:8月更文挑战”
js写多了 就总是记不住css的em的单位换算规则 总结了下前端css的相关单位和像素的转换关系
| 单位 | 转换 |
|---|---|
| px | 1屏幕实际像素 |
| rpx | 微信小程序中的单位 规定屏幕实际宽度 = 350rpx |
| em | 1em = 当前元素font-size大小(px) 如果当前font-size大小是em单位 则继承父级 如果没有父级 则取浏览器默认值 |
| rem | 1rem = 根元素 font-size大小(px) 如果根元素font-size的大小是rem单位 则取浏览器默认值 |
| pt | 1pt = DPI/72; (px) |
| vw | 1vw = 1% * 页面实际宽度(px) |
| vh | 1vh = 1% * 页面实际高度(px) |
| vmax | 1vmax = 1vh > 1vw ? 1vh :1vw |
| vmin | 1vmin = 1vh < 1vw ? 1vh :1vw |
| ch | 1ch = 当前元素font-size大小 的 0 的宽度(px) 如果没有继承父级 直到浏览器默认值 |
| ex | 1ex = 1em/2 |