H5之屏幕适配

H5屏幕适配的方法
1、流式布局
2、固定宽度
3、响应式
4、通过viewport进行缩放（推荐）
5、使用rem（推荐）

流式布局：
通过百分比来划分区域尺寸（搭配min-width、max-width等属性使用，例如，设置网页主体的width:80%;min-width:320px；图片:width:100%, max-width:一般设定为图片本身的尺寸(防止被拉伸而失真）但是高度大都依旧使用px来固定
问题:在大屏幕的手机下显示效果宽度会拉长，但是高度,字体不变，实际显示会很不协调，这就是流式布局的最致命的缺点

固定宽度：
将页面设置固定宽度，两侧留白，简单方便。例如：width:320px;margin:0 auto;这样做视觉
问题：大屏幕手机下两边是留白比较大，视觉效果差，页面小，操作按钮小，不方便操作

响应式：
媒体查询，根据不同分辨率设备做不同处理
问题：兼容各种设备工作量大，效率低下；代码累赘，会出现隐藏无用的元素，加载时间加长；一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

对viewport进行缩放：

该方法简单、粗暴、高效。以320宽度为基准，对viewport进行缩放，同时可以解决ios下1px问题
问题：部分缩放会导致有些页面元素模糊

 (function(win, doc) {
    var isIOS = win.navigator.appVersion.match(/iphone/gi);
    var isAndorid = win.navigator.appVersion.match(/android/gi);
    var deviceDpr = win.devicePixelRatio;
    var setDpr = 1;
    var scale = 1;
    var rootEle = doc.documentElement;
    var viewport = doc.querySelector('meta[name="viewport"]');

    // 只针对ios进行处理
    if (isIOS) {
        if (deviceDpr >= 3) {
            setDpr = 3;
        } else if (deviceDpr >= 2) {
            setDpr = 2;
        } else {
            setDpr = 1;
        }
    } else {
        // 对安卓及其他设备设置dpr为1
        setDpr = 1;
    }
    if (!viewport) {
        viewport = doc.createElement('meta');
        viewport.setAttribute('name', 'viewport');
        viewport.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=' + 'no, uc-fitscreen=yes');

        if (!rootEle.firstElementChild) {
            var wrapper = doc.createElement('div');
            wrapper.appendChild(viewport);
            doc.write(wrapper.innerHTML);
        } else {
            rootEle.firstElementChild.appendChild(viewport);
        }

    } else {
        // 如果页面已经设置了viewport，则对viewport进行更改
        viewport.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no, uc-fitscreen=yes');
    }
    rootEle.setAttribute('style', 'font-size: ' + 16 * setDpr + 'px;');
    window.DPR = setDpr;
})(window, window.document);

rem:
rem是相对于根元素计算大小的，这样就意味着，我们只需要在根元素确定一个大小，rem则可以来算出元素的宽高
根据媒体查询，更改html的font-size即可，利用rem则可达到自适应的目的
问题：最小颗粒为1px（ios8开始支持0.5），在Retine屏的分辨率始终是普通屏幕的2倍，视觉效果会变粗

/*移动端适配 width|height|font-size = 视觉稿量出来的值 / 100rem;*/
@media screen and (max-width:359px) and (min-width:320px) {
    html,body{
        font-size: 50px !important;
    }
}
@media screen and (max-width:374px) and (min-width:360px) {
    html,body{
        font-size: 56.25px !important;
    }
}
@media screen and (max-width:413px) and (min-width:375px) {
   html,body{
        font-size: 58.5px !important;
    }
}
@media screen and (max-width:639px)  and (min-width:414px){
   html,body{
        font-size: 64.6px !important;
    }
}
@media screen and (min-width:640px) {
   html,body{
        font-size: 100px !important;
    }
}

每一个方法都有自己的优势和缺点，根据自己的业务场景选择即可