关于移动端适配解释

关于移动端适配的问题，之前一直是懵的，网上有很多文档，找了几篇看后发现方式方法有很多，基本不同，但是普遍选择rem来代替px做单位。

这是因为：rem本身没有继承性。

接下来就对整个过程进行详解！

我们知道，rem是以html的font-size大小为基准进行计算的，比如html的font-size为10px，那么1rem就等于10px。

下面用一张实际的标注图进行解析

该图是设计给的750的图，图中的各种标注，都是以750为基准的。

（这里我们以适配iphone6为例，iphone6分辨率为375）

首先主要看“电话”的容器宽，设计图所标注电话容器宽在分辨率为750的情况时，宽为320px。那么可以得知如果适配分辨为375的iphone6时，他的容器宽应该为180px。

以上都是我们已知的。

这时候如果我们html的font-size为10px，那么我们电话容器宽设置为18rem即可。（接下来就实现动态设置html的font-size）

具体实现方法看如下，首先我们看动态计算html的font-size的代码：

(function (win, doc) {
    function change() {
        doc.documentElement.style.fontSize = 20 * (doc.documentElement.clientWidth / 750) + 'px';
    }
    //调用函数
    change();
    //窗口发生改变时,添加绑定事件
    win.addEventListener('resize', change, false);
})(window, document);

经由上图计算，可以得知，当我们设备宽为375（iphone6）时，页面html的font-size值为10px，此时1rem就等于10px。

根据750的设计图得知容器宽此时为320，那么适配375时，容器宽应为180。这时经由上图代码计算得知，适配设备分辨率为375时，他html的font-size值为10px，那么此时将容器设置为18rem，就可以做到对iphone6下的适配。

（疑问：设计图标注为320，手动计算设置为18，有没有什么办法直接根据设计图给的尺寸输入就可实现计算呢）

当然有！！！

这个时候就显示出scss的强大了，我们通过scss定义一个计算方法（如下图）：

$baseFontSize: 20px !default;
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}

将设计图中容器宽320px套用到公式中，经过计算，可以得到值为18rem。这样，在iphone6下，就可以得到适配过后的容器宽了。

（以上只对iphone6进行解释，其他设备经测试，适配效果很好）