移动端web宽度适配

vw是由视口的宽度计算的

 

不同的设备完美视口的大小是不一样的

　　　iPhone6   ---  375

　　　iPhone6plus  --- 414

 

由于不同设备视口和像素比不同，所以同样的375像素在不同的设备下意义是不一样的.

　　　　比如在iPhone6中 375就是全屏，而到了 plus 中375就会缺一块

 

所以在移动端开发时，就不能再使用px来进行布局了

 

vw这个单位永远相当于视口宽度（viewport width）

　　　　100vw = 一个视口宽度

　　　　1vw = 1%视口宽度

 

　　vw这个单位永远相当于视口宽度进行计算

　　创建一个48px  x  35px 大小的元素

　　

　　100vw = 750px（设计图像素） 0.1333333333333333333vw  =  1px
 

vw/vh和百分比的区别：

    　　　百分比 是相对于父元素的大小设定的比率

　　　　vw (viewport width) vh (viewport height) 是视窗的大小，100vw = 100%视窗宽度 100vh = 100%视窗高度
 

手机端我们假设设计稿是以750px为标准的，那么:
100vw = 750px
1vw = 7.5px
我们想要： 1rem = 100px
那么：
100px = 100vw / 7.5 = 1rem
那么：
1rem = 13.33vw
 

rem:是相对单位，相对于html的字体尺寸。