移动布局的方法

移动端的布局
1：REM
2：百分比布局

而REM有三种方法：媒体查询和REM 2：VW与REM 3：用JS插件
hack1:
@media all and (max-640px){
html{font-size: 12px;}
}
@media all and (min-641px) and (max-750px){
html{font-size: 14px;}
}
@media all and (min-751px){
html{font-size: 16px;}
}
设备像素比(dpr)

物理像素（设备实际显示的像素） 逻辑像素（css里面的像素）

dpr = 物理像素 / 逻辑像素

参照大部分用户需求（设备的使用率）：
UI 》 640px 750px 1080px;

如果设计图宽度为640px和750px 考虑dpr为2
如果设计图1080px 考虑dpr为3
hack2:
单位！
vw 视口的宽 100vw == 视口宽度的100%
vh 视口的高 100vh == 视口高度的100%
vmin
vmax

目的：把html中font-size的值的单位设置成vw;

为了方便计算 可以把html中font-size设置成100px;但是100px固定大小不会自动适配。所以把100px转成vw
100px == ?vw

第一种情况：
设计图为750px 》 考虑设备像素比dpr2 》 375px;

100vw == 375px
1vw == 3.75px
?vw == 100px
26.67vw == 100px

第二种情况：
设计图640px >考虑设备像素比dpr2 > 320px

100vw == 320px
1vw == 3.2px
31.25vw == 100px

当设计图为640px 31.25vw
当设计图为750px 26.67vw
hack3:
首先在页面导入flexible.js导入 <script src="js/flexible.js"></script>
去掉mete标签（禁止缩放）的设置

设计图为750px;
从设计图量出header的height为88px;

css设计height 88 / 100 == 0.88rem;