1、不同设备完美视口的大小是不一样的,如:iphone6----375px、iphone6plus----414px
由于设备视口和像素比不同,所以同样375个像素在不同设备下的效果是不一样的。在iphone6中刚好完整显示,在iphone6plus中就会留有一部分的空白。所以在移动端的开发中,不能使用px来进行页面的布局。
2、vw (viewport width)视口的宽度(是css中另一个单位)。100vw=1个视口的宽度,1vw=1%的视口宽度,视口宽度永远都是相对于视口的宽度来进行计算的。
3、设计图的宽度一般都是 375px(二倍图)或1125px(三倍图)。
4、设计图的宽度为750px,其中一个图标大小为48px*35px,那么用vw来表示的大小是多少?
答:100vw=750px,1px=0.1333333333333333vw,所以48px=6.4vw。35px=4.667vw。
5、vw适配:
可知,1rem对应1个html中字体的大小,为了是上面的值好算我们可以将对应关系1px=0.1333333333333333vw,表示为html中字体的大小。注意:网页中默认字体的大小不能小于12px,当设置的字体小于12px时,浏览器会默认将字体设置为12px。所以在设置为html中字体的大小时,我们可以对等式做相应的修改,如下:
1px=0.13333vw (小于12px)
10px=1.3333vw (小于12px)
40px=5.3333vw(大于12px,可以设置),但对应的元素的大小要除以40的相应的rem大小。
100px=13.3333vw(大于12px,可以设置),但对应的元素的大小要除以100的相应的rem大小。
注意:只要大于12px的可以用,具体用哪个看自己