基本单位
单位 | 计算方式 | 简介 |
---|---|---|
px | 标准像素 | 优点兼容性最好,缺点没有弹性,对于过大过小屏幕显示效果不好 |
em | font-size元素大小 | 1em等于font-size的大小(font-size默认为16px)不常用,利用font-size属性可以继承的特点。 |
rem | html元素大小 | 1rem等于html的大小,如html大小为100px,0.1rem就等于10px,常用。 |
% | 父元素大小 | 常用,很好理解,父元素的百分比。 |
vw | 视口宽度的1% | window.innerWidth元素的1%,如果视口宽度为200px,1vw等于2px, |
vh | 视口高度的1% | window.innerHeight元素的1%,与上同理 |
vmin | vw、vh中的最小 | css3属性,可以用vm简写,但ie9不支持简写 |
vmax | vw、vh中的最大 | css3属性,兼容性很差,不推荐用。 |
rpx | 微信标准弹性单位 | 微信小程序长度属性,在iphone678中1rpx=0.5px,其他大小的视口会相对变化 |