工作10个月后的第一个H5页面

学习前端时学过关于H5页面的一些相关知识，但是在工作中从来没有涉及到，以至于公司突如其来的一个H5页面的需求，自己的第一反应是一脸懵。。。

还好自己学过，拾起来并不是太难，勉强的算是成功的完成了需求。写个文章再记录一下关于H5页面需要注意的一些基础事项，防止自己再次的一脸懵。

---

第一步：肯定是创建一个html文件，然后将meta标签加入。

第二步：使用 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。