功能決定成度，樣式決定美感度，在移動H5頁面佈局上規範必然時不可少。
在H5頁面 UI設計圖的基礎，如何根據設計圖片寫出比例相同， 在不同移動裝置上頁面上的樣式依然保持一致。響應式頁面，rem佈局的使用方法。
1、設定viewport

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

2、重點在於設定頁面根元素的字型大小，rem單位是根據頁面根元素進去相對比例的計算。注意750 為設計圖片的寬度！由於手機在橫豎屏方向，document.documentElement.clientWidth 會不一樣，在例項程式碼中進行有效處理。
document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 +’px’;

var evt = "onorientationchange" in window ? "orientationchange" : "resize";
    window.addEventListener(evt, resize, false);

        function resize(fals) {
            //設定標準螢幕可見寬度的（Iphone6+）
            var k = 375;
            if(window.orientation == 0 || window.orientation == 180) {
                //
 
豎屏
            } else {
                //橫屏
                k = 320;
            }

            if(document.documentElement.clientWidth <= k) {
                document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 +'px';
            }else {
                //這裡如果螢幕可見寬度大於 標準螢幕寬度，設定標準函式寬度為375
 
px OR 320px.
                document.documentElement.style.fontSize = k / 750 * 100 +'px';
        }
}
resize(true);

真正實現的處理邏輯體現第二步驟，可直接應用於專案中。然後在設定字型大小、圖片高度寬度的基礎上使用rem 單位實現基本的H5頁面樣式響應。
字型根據H5設計圖提供的字型大小 除以 100 得到rem 單位的換算。20px – 0.2rem 。100px – 1rem。

QQ群：595377655。問題總是能出現並著手解決的地方，歡迎加入。