# 1 移动端适配

为什么要做适配

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

# 适配方案

• 固定高度，宽度百分比适配-布局非常均匀，适合百分比布局
• 固定宽度，改变缩放比例适配-什么情况都可以
• 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计算

Rem适配(常用)

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

head加入常见的meta属性

<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--这个是关键-->
<meta name="viewport" content="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.getBoundingClie