移动端适配

为什么要做适配

为了适应各种移动端设备，完美呈现应有的布局效果
各个移动端设备，分辨率大小不一致，网页想铺满整个屏幕，并在各种分辨下等比缩放

适配方案

固定高度，宽度百分比适配-布局非常均匀，适合百分比布局
固定宽度，改变缩放比例适配-什么情况都可以
Rem 适配
像素比适配

单位

em根据元素自身的字体大小计算,元素自身 16px 1em=16px
Rem R -> root 根节点( html ) 根据 html 的字体大小计算其他元素尺寸

百分比适配

固定高度，宽度百分比适配

根据设置的大小去设置高度，单位可以用 px 百分比 auto
常用 Flex 布局
百分比宽度

以 640 设计稿为例，在外层容器上设置最大以及最小的宽

#wrapper {
    max-width: 640px; /*设置设计稿的宽度*/
    min-width: 300px;
    margin: 0 auto;
}

后面的区块布局都用百分比，具体元素大小用px计算

640 是 320 的 2 倍，老的低端安卓机横向分辨率大多是 320，现在大多模拟分辨率为 360

rem 适配(常用)

根据屏幕的分辨率动态设置html的文字大小，达到等比缩放的功能
保证html最终算出来的字体大小，不能小于12px
在不同的移动端显示不同的元素比例效果
如果html的font-size:20px的时候，那么此时的1rem = 20px
把设计图的宽度分成多少分之一，根据实际情况
rem做盒子的宽度，viewport缩放

head加入常见的meta属性

<meta >
<meta >
<meta >
<!--这个是关键-->
<meta width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0，minimum-scale=1.0">

把这段代码加入head中的script预先加载

// rem适配用这段代码动态计算html的font-size大小
(function(win) {
    var docEl = win.document.documentElement;
    var timer = '';

    function changeRem() {
        var width = docEl.getBoundingClientRect().width;
        if (width > 750) { // 750是设计稿大小
            width = 750;
        }
        var fontS = width / 10; // 把设备宽度十等分 1rem=10px
        docEl.style.fontSize = fontS + "px";
    }
    win.addEventListener("resize", function() {
        clearTimeout(timer);
        timer = setTimeout(changeRem, 30);
    }, false);
    win.addEventListener("pageshow", function(e) {
        if (e.persisted) { //清除缓存
            clearTimeout(timer);
            timer = setTimeout(changeRem, 30);
        }
    }, false);
    changeRem();
})(window)