vw结合rem实现移动端布局

继上一篇《媒体查询结合rem实现移动端布局》的改进！
仍是以昨天写的页面为例

上一回说到了媒体查询结合rem作移动端布局，步骤以下

首先设置媒体查询，肯定html中font-size值的变化

@media all and (max-width:320px){
                html{font-size:12px;}
            }
            @media all and (min-width:321px) and (max-width:375px){
                html{font-size:14px;}
            }
            @media all and (min-width:376px){
                html{font-size:16px;}
            }

实现步骤：

1:例如设计图为750px .设计图量出height为88px;
        2:考虑dpr为2，量出header高度为88px，因此88px / 2 == 44px
        3:44px == ?rem
        4:由于设计图为750px 因此范围在(min-width:321px) and (max-width:375px)   因此如今1rem == 14px;
        5:44px / 14px == ?rem;

今天就是在上一次的基础上再加以改进。媒体查询结合rem计算数值太费劲，每次都要用计算器算。而vw就不同了，只须要先除以dpr，再除以100，口算比较容易。

直接在重置样式后面写上定义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)