摘要：
上一回说到了媒体查询结合rem做移动端布局，步骤如下 上一回说到了媒体查询结合rem做移动端布局，步骤如下首先设置媒体查询，确定html中font-size值的变化@mediaalland{html{font-size:12px;}}@mediaallandand{html{font-size:14px;}}@mediaalland{html{font-size:16px;}}实现步骤：1:例如设计图为750px.设计图量出height为88px;2:考虑dpr为2，量出header高度为88px，所以88px/2==44px3:44px==?rem;今天就是在上一次的基础上再加以改进。媒体查询结合rem计算数值太费劲，每次都要用计算器算。
首先设置媒体查询，确定html中font-size值的变化
@media all and (max-320px){
html{font-size:12px;}
}
@media all and (min-321px) and (max-375px){
html{font-size:14px;}
}
@media all and (min-376px){
html{font-size:16px;}
}
实现步骤：
1:例如设计图为750px .设计图量出height为88px;
2:考虑dpr为2，量出header高度为88px，所以88px / 2 == 44px
3:44px == ?rem
4:因为设计图为750px 所以范围在(min-321px) and (max-375px) 所以现在1rem == 14px;
5:44px / 14px == ?rem;
直接在重置样式后面写上定义html中font-size的值就行。
如果设计图为640px html{font-size:31.25vw}
如果设计图为750px html{font-size:26.67vw}
实现的步骤：
1：例如设计图为750px .设计图量出height为88px;
2：考虑dpr 88px / 2 == 44px
3：44px / 100 == 0.44rem (26.67vw 或者31.25vw 等同于 100px)原理分析：
1.rem
rem是相对于根元素的字体大小的单位
rem能等比例适配所有的屏幕，根据html的字体的大小来控制rem的大小
2.dpr设备像素比
dpr = 物理像素 / 逻辑像素
物理像素：设计图量出的px（设备显示的px）
逻辑像素：css中设置的px
如果设计图的宽度是640px 或者 750px dpr = 2
如果设计图的宽度是1080px dpr = 3
3.vw
视窗宽度
1vw 等于视窗宽度的1%
100vw 等于视窗宽度的100%
4.vw 与 px 之间的换算
如果设计图的宽度是640px 则 dpr = 2
所以：逻辑像素 = 640px /2 = 320px
所以：320px = 100vw
所以：1vw = 3.2px
所以：31.25vw = 100px = 1rem
如果设计图的宽度是750px 则 dpr = 2 所以：逻辑像素 = 750px /2 = 375px 所以：375px = 100vw 所以：1vw = 3.75px 所以：26.67vw = 100px = 1rem
如果设计图的宽度是1080px 则 dpr = 3 所以：逻辑像素 = 1080px / 3 = 360px 所以：360px = 100vw 所以：1vw = 3.6px 所以：27.78vw = 100px
5.根元素字体大小的限制
如果设计图宽度为640px
则：根元素设置为
html{font-size:31.25vw}
如果设计图宽度为750px
则：根元素字体大小设置为
htmt：{font-size:26.67vw}
如果设计图宽度为1080px
则根元素字体大小设置为
html:{font-size:27.78vw}
6.计算方法：
为了方便计算：1rem = 100px,,所以，要除以100
已知 dpr = 2
如果量取设计图的某部分 宽度 300px
物理像素-------逻辑像素-------rem
则：300/2/100 = 1.5rem
7.rem是相对于根元素的字体大小的单位，能等比例适配所有的屏幕，根据html的字体的大小来控制rem的大小
如果设计图为 640px
根元素font-size=31.25vw 相当于100px,相当于 1rem
如果设计图为750px
根元素font-size=26.67vw 相当于100px,相当于 1rem
一般，我们要在公共样式中根据设计图的大小，设置根元素字体的大小，单位为vm，
如果设计图为640px,html{font-size:31.25vw}
如果设计图为750px，html{font-size:26.67vw}
然后，我们量取得px/2/100即：物理像素/2/1008、分析
1vw表示1%的屏幕宽度,而我们的设计稿通常是750px的,屏幕一共是100vw,对应750px,那么1px就是0.1333333vw,又因为dpr为2,所以真正意义上讲1px为0.2667vw。
同时我们知道rem,rem是相对html元素的字体大小，为了方便计算,我们取html的font-size=100px,通过上面的计算结果1px是0.13333333vw,那么100px就是13.333333vw了
所以，我们让1rem=100px=13.333333vw
我们可以直接在html中设置 font-size:13.333333vw; 也可以使用css中的 calc()函数，上代码
html { font-size: calc(100vw / (750/2) * 100); }
.