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)