工作10個月後的第一個H5頁面

學習前端時學過關於H5頁面的一些相關知識，但是在工作中從來沒有涉及到，以至於公司突如其來的一個H5頁面的需求，自己的第一反應是一臉懵。。。

還好自己學過，拾起來並不是太難，勉強的算是成功的完成了需求。寫個文章再記錄一下關於H5頁面需要注意的一些基礎事項，防止自己再次的一臉懵。

---

第一步：肯定是創建一個html文件，然後將meta標籤加入。

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

<title>H5頁面</title>

<meta name="keywords" content="H5頁面"/>

<meta name="description" content="H5頁面的描述"/>

第二步：使用 rem 相對單位，設置根元素的字體大小。

!(function(doc, win){
    var docEle = doc.documentElement;
    var resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';
    recalculate = function() {
        var clientWidth = docEle.clientWidth;
        if(!clientWidth){
            return;
        }
        if(clientWidth >= 750){
            docEle.style.fontSize = 100 + 'px';
        }else{
            docEle.style.fontSize = 100 * (cilentWidth / 750) + 'px';
        }
    }
    if(!doc.addEventListener){
        return;
    }
    win.addEventListener(resizeEvent, recalculate, false);
    doc.addEventListener('DOMContentLoaded', recalculate, false);
})(document, window)

第三步：檢測打開頁面的是瀏覽器還是移動端。

(function(){                             
    if(/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)){
        //進行移動端樣式的顯示
    }else{
        //進行PC端樣式的顯示
    }
})()

第四步：寫樣式。

元素的 width 能用百分比的就用百分比，高度、字體用 rem，border 用 px。