前端单位换算

467 阅读1分钟

这是我参与8月更文挑战的第1天,活动详情查看:8月更文挑战

js写多了 就总是记不住css的em的单位换算规则 总结了下前端css的相关单位和像素的转换关系

单位转换
px1屏幕实际像素
rpx微信小程序中的单位 规定屏幕实际宽度 = 350rpx
em1em = 当前元素font-size大小(px) 如果当前font-size大小是em单位 则继承父级 如果没有父级 则取浏览器默认值
rem1rem = 根元素 font-size大小(px) 如果根元素font-size的大小是rem单位 则取浏览器默认值
pt1pt = DPI/72; (px)
vw1vw = 1% * 页面实际宽度(px)
vh1vh = 1% * 页面实际高度(px)
vmax1vmax = 1vh > 1vw ? 1vh :1vw
vmin1vmin = 1vh < 1vw ? 1vh :1vw
ch1ch = 当前元素font-size大小 的 0 的宽度(px) 如果没有继承父级 直到浏览器默认值
ex1ex = 1em/2