10.flex-------05.视口（vw)

        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的可以用，具体用哪个看自己