em/px/rem/vh/vw的区别?

161 阅读1分钟

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、较小的像素不好适配