关于移动端的适配问题

题外话：还记最早之前接触移动端开发的时候，用的是宽度设置百分比，高度固定的方式；百分比适配应该算是最久远，最容易想到的一种适配方案。但是在不同的分辨率下图片出现拉伸变形，导致用户体验比较差。现统计一下目前的几种移动端的适配方案。

1、流式布局（百分比适配）

      百分比适配是按照设计稿，根据展示元素的大小和位置进行百分比的换算。宽度设置百分比，高度固定，字体大小固定，在只要文字的简单页面的时候，百分比适配还是比较实用的。但是存在图片的复杂一点的页面，小屏和大屏的页面差距有点大，用户体验性相对比较差。

2、响应式布局（媒体查询@media）

    媒体查询是根据屏幕区间，更改html的font-size的大小。

@media screen and (max-width: 320px) {
    html{font-size: 14px;}
}
@media screen and (min-width: 321px) and (max-width: 413px) {
    html{font-size: 16px;}
}
@media screen and (min-width: 414px) and (max-width: 639px) {
    html{font-size: 17px;}
}
@media screen and (min-width: 640px) {
    html{font-size: 18px;}
}

一般大型的网站不会考虑这种方式，因为工作量大，一般都是中小型的门户或者博客类站点会采用响应式的方法从web page到webapp直接一步到位，因为这样可以节约成本，不用再专门为自己的网站做一个webapp的版本。

这种方式根据不同的分辨率设置不同的样式，冗余代码较多，要做多个分辨率的适配，css代码写的较多。使用成熟的bootstrap框架可接受较多时间。

3、浏览器的缩放功能

 根据设计稿的还原成HTML，然后根据屏幕宽度除以设计稿的宽度的值在进行设置缩放。

<meta name="viewport" content="width=320,maximum-scale=2,minimum-scale=2,initial-scale=2,user-scalable=no"> //640

 这种方法在缩放可能会导致有些页面元素会糊的情况，所以不太推荐这种方法

4、使用rem单位

 rem ------ 是指相对于根元素的字体大小的单位,

　　　　 rem值  =  需要转换的像素值 ÷ 根元素html的font-size  

  em ------ 是指相对于父元素的字体大小的单位, 浏览器的默认字体高都是16px，所以未经调整的浏览器1em为16px

　　　　em值  =  需要转换的像素值 ÷ 父元素的font-size 

html{ font-size: 62.5%}  // 10/16*100%
h1{font-size: 2rem}   //2*10 = 20px

  根据不同的屏幕大小动态设置html的字体大小font-size，然后rem值换算设置width,height,padding,margin值等。

  可以使用js动态设置html的字体大小和缩放值，如下flexible.js

!function(e) {
    function t() {
        var t = o.getBoundingClientRect().width;
        t / i > 640 && (t = 640 * i),
        e.rem = t / 10,
        o.style.fontSize = e.rem + "px"
    }
    var i, n, a, r = e.document,
    o = r.documentElement,
    l = r.querySelector('meta[name="viewport"]'),
    d = r.querySelector('meta[name="flexible"]');
    if (l) {
        var s = l.getAttribute("content").match(/initial\-scale=(["']?)([\d\.]+)\1?/);
        s && (n = parseFloat(s[2]), i = parseInt(1 / n))
    } else if (d) {
        var s = d.getAttribute("content").match(/initial\-dpr=(["']?)([\d\.]+)\1?/);
        s && (i = parseFloat(s[2]), n = parseFloat((1 / i).toFixed(2)))
    }
    if (!i && !n) {
        var m = (e.navigator.appVersion.match(/android/gi), e.navigator.appVersion.match(/iphone/gi)),
        i = e.devicePixelRatio;
        i = m ? i >= 3 ? 3 : i >= 2 ? 2 : 1 : 1,
        n = 1 / i
    }
    if (o.setAttribute("data-dpr", i), !l)
       if (l = r.createElement("meta"), l.setAttribute("name", "viewport"),
          l.setAttribute("content", "initial-scale=" + n + ", maximum-scale=" + n + ", minimum-scale=" + n + ", user-scalable=no"), o.firstElementChild) o.firstElementChild.appendChild(l);
    else {
        var c = r.createElement("div");
        c.appendChild(l),
        r.write(c.innerHTML)
    }
    e.dpr = i,
    e.addEventListener("resize",
    function() {
        clearTimeout(a),
        a = setTimeout(t, 300)
    },
    !1),
    e.addEventListener("pageshow",
    function(e) {
        e.persisted && (clearTimeout(a), a = setTimeout(t, 300))
    },
    !1),
    "complete" === r.readyState ? r.body.style.fontSize = 12 * i + "px": r.addEventListener("DOMContentLoaded",
    function() {
        r.body.style.fontSize = 12 * i + "px"
    },
    !1),
    t()
} (window);

如果觉得换算比较麻烦，Sublime Text 3安装cssrem插件，可以进行自动换算。

 rem 兼容性：