用于pc端与移动端页面的适配
1. 创建页面时先将网页的视口设置为完美视口
<meta name="viewport" content="width=device-width, initial-scale=1.0">写在heade中
2.了解vw
100vw = 一个视口宽度 (将视口大小分成100份，1vw=1%的视口大小)
所以可以根据设计图的px宽度进行计算得出？1px=？vw
如：设计图的宽度750px得：
100vw=750px
即：1px=100/750=0.133333333333333...vw
创建一个宽48px ，高35px大小的元素
100vw = 750px(设计图的像素)
0.1333333333333333vw = 1px
48px=48 X 0.1333333333333333vw=6.4vw
35px =35 X 0.1333333333333333vw=4.667vw
既css可设置为
****{
width:6.4vw;
height:4.667vw;
}
3. 通过vm与rem进行换算
（1 rem = 1 html的字体大小）
将大于12px（因为有的浏览器（webkit）字体最小只能为12px）的值通过vw， html {font-size: ....vw;}换算成全局字体默认大小（得到rem）
如：40px
0.1333333vw = 1px
0.1333333vw*40px=5.3333vw
5.3333vw = 40px
通过设置font-size全局属性
html {font-size: 5.3333vw;}
得到：1 rem = 40 px；
创建一个48px x 35px大小的元素
就可以设置为1.2rem * 0.875rem的元素
既css可设置为
****{
width:1.2rem;
height:0.875rem;
}
简单总结
先求出等于1px的vw，在以vw通过 html {font-size: ....vw;}得出rem
进行大小的设置。
px-->vw-->rem
其实有人可能会觉得转换到vw就可以了为什么还要用rem呢？
因为单纯使用vw进行布局不能限制布局的宽度，对于有这个需求的场景至少还是需要将vw和rem混用来处理边界情况。
