rem | em | px | rpx | vw | vh | vm | |
---|---|---|---|---|---|---|---|
原理 | 相对于根html的font-size大小计算。 如:font-size: 10px,那么1em=10px |
相对于父元素的font-size | 相对于显示器屏幕分辨率而言 | 把屏幕水平分为750份,自动计算适配 | 相对视口(viewport)宽度而定,长度等于视口宽度1/100 | 相对视口(viewprot)高度而定,长度等于视口高度1/100 | 相对视口(viewprot)宽度或高度中较小的那个而定,等于其1/100 |
优点 | 1.快速适应移动端布局,字体,图片高度 2.没有破坏完美视口 |
小程序中最优选择,可以精准布局 | |||||
缺点 | 1.ie不支持,pc使用次数不多 2.rem转换计算量大,所有图片,盒子都需要我们给一个准确值,才能保证不同机型适配 3.响应式布局中,需要通过js控制根元素font-size大小,且改变font-size的代码要放在css样式前。 |
小程序和移动端布局不推荐 | 只能在小程序中使用 | 换算不精准,1px、较小的像素不好适配 | 换算不精准,1px、较小的像素不好适配 | 换算不精准,1px、较小的像素不好适配 |