H5開發筆記

這兩天H5靜態頁面開發過程當中的問題總結。

1.viewport - 移動開發必須的配置

//內容寬爲設備寬度，初始化縮放倍數爲1（不縮放）
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

2.rem和px

(1)px是相對於顯示器屏幕分辨率而言的相對長度單位。

(2)rem是相對根元素的font-size大小的相對單位，能夠作到只修改根元素font-size大小就成比例地調整全部字體大小。

適配：

• 利用媒體查詢設置斷點來控制HTML的font-size

html {         
    font-size:16px;  
}  
@media (max-width:414px) 
{ 
    html {         
        font-size: 18px; 
    }  
} 
@media (max-width:375px) { 
    html { 
        font-size: 20px;
    }
}

• 根據屏幕大小動態設置html的font-size

var deviceWidth=document.documentElement.clientWidth;  
var rootFontSize = deviceWidth / 6.4; 
document.documentElement.style.fontSize=rootFontSize + 'px';

3.同行元素上下位移誤差問題

手動設置元素居中，要否則瀏覽器會隨機渲染，必須給它一個渲染規則。

4.元素設置display:inline-block,自動產生間距

解決:給父元素設置font-size:0； letter-spacing: -4px; 子元素再另外設置font-size和letter-spacing。

5.自適應佈局

• 父元素設置display:flex ,子元素flex屬性值設置比列。
• 利用百分百（%）佈局

6.調試換分辨率設備自動重佈局

//orientationchange：設備更換事件 
//onresize：接收reset事件時觸發的EventHandler 
//DOMContentLoaded: 瀏覽器窗口大小發生變化事件

(function (doc, win) {     
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',     
    recalc = function () {      
        var clientWidth=doc.documentElement.clientWidth;         
        if (!clientWidth) return;   
            //動態計算根元素的font-size
            doc.documentElement.style.fontSize=(clientWidth / 6.4) + 'px';     
        };      
        if (!doc.addEventListener) return; 
        
        //監聽設備變化
        win.addEventListener(resizeEvt, recalc, false);  
        //監聽瀏覽窗口變化
        doc.addEventListener('DOMContentLoaded', recalc, false);     
})(document, window);

7.總結

H5頁面的開發，由於設備視口大小不一致，在適配上應該足夠細緻、嚴謹。除了自適應的佈局以外，更應該注意細節的處理。