移动端Web 关于单位rem的使用小结

　　最近写了很多的h5页面和web项目开发，可是对于自适应布局的设置，团队里一直没有一个统一的标准，也极可能真的没有什么标准，多是我对统一性执念太大。

　　在这以前作Web App开发的的时候，在自适应方面通常都是宽度经过百分比，高度以iPhone6跟iPhone5之间的一个平衡值写死，咱们的设计稿都是iPhone5的640 * 1136标准，因此高度通常取个大概值，各类图标的宽高也是取平衡值写死，而后部分样式经过媒体查询来设置，例如背景图的多倍图、基础字体大小、图标宽高。

　　可是这样作有一个问题，就是作出来的页面在各类手机端看起来的物理大小（高度）是同样的，因此在大屏手机会以为页面稍小，小屏手机页面稍大。设计也常常找咱们修改字体大小，间距问题，哎。

　　有时候，会使用一些框架默认的单位设置，或自动化工具的智能设置。 我始终没弄明白怎么个算法，因此就扒拉些大神的文章，这里经过本身的理解，写个小结。

　　那么html5该如何去作众多移动设备的适配呢？为了完成工做，咱们须要找寻更简单更有效率的方法。

　　方案一：

　　（1）方案的简单介绍: 基于rem

　　前提：页面元素的布局尺寸全都以设计稿为基准等比例设置。

　　给html根节点设置一个基础font-size值，而后页面的全部元素布局均相对于该font-size值采用rem单位设定。那么基础的font-size值该如何取呢？

　　假如经过媒体查询设置font-size，只能解决一部分的状况，并且并不能完成适配，由于手机屏幕宽度类型实在太多了，因此font-size的取值要经过js计算，取当前viewport的deviceWidth与设计稿的宽 的 比例值，例如：咱们的设计稿尺寸都是640px的，iphone5的deviceWidth是320px，那么计算出来的font-size值就是 320 / 640 = 0.5，由于得出的font-size过小，不方便计算，且有的浏览器可能不兼容过小字号，因此将font-size放大100倍，因此最终计算出来的font-size为 320 / 640 * 100 = 50(px); 固然，这个值是根据设计稿来计算的，因此根据计算规则，下面列出几种常见设计稿相应的font-size值：

deviceWidth = 320，font-size = 320 / 6.4 = 50px
deviceWidth = 375，font-size = 375 / 6.4 = 58.59375px
deviceWidth = 414，font-size = 414 / 6.4 = 64.6875px
deviceWidth = 500，font-size = 500 / 6.4 = 78.125px

　　可在script标签加上以下代码：

(function () {
    document.addEventListener('DOMContentLoaded', function () {
        var html = document.documentElement;
        var windowWidth = html.clientWidth;
        html.style.fontSize = windowWidth / 6.4 + 'px';
        // 等价于html.style.fontSize = windowWidth / 640 * 100 + 'px';
    }, false);
})();
 
// 这个6.4就是根据设计稿的横向宽度来肯定的，假如你的设计稿是750
// 那么 html.style.fontSize = windowWidth / 7.5 + 'px';

　　至此，font-size的基础值就肯定好了，并且知道该font-size值是手机deviceWidth跟设计稿的比例值 的 100倍（重要）

　　（2）那么页面元素该如何设置宽高、边距

例如：一个设计稿宽高为140px的图标，左边距为50px，那么它的css应该这样写

.icon {
    width: 1.4rem; /* 像素换算rem：140px / 100 = 1.4rem */
    height: 1.4rem;
    margin: 0 0 0 .5rem;
}

　　由于html的font-size是放大了100倍，因此计算rem时，要用设计稿的实际像素除以100，140px / 100 = 1.4rem; 最后实际的像素大小就会由deviceWidth跟设计稿的横向宽 的 比例 自动计算出来。

　　可是，这暴露出了一个背景使用雪碧图的一个弊端（因为font-size小数点太多，计算出实际背景图大小background-size跟背景图位置background-position时浏览器精度不够可能就会出现位置的误差），经过换算rem设置background-size跟background-position的时候，在一些手机型号下会出现背景图错位的状况，但是若是不用rem设置的话，又不能达到适配的目的。（background-size、background-position的rem换算方法跟前面讲的宽高设定同样，都是设计稿尺寸（这时应该是雪碧图的原始尺寸）除以100倍）

　　最简单的方法就是，不使用雪碧图，使用单个背景图，这个时候就不存在background-position的须要，只需设定background-size: contain;便可，这样作的弊端就在于没法使用雪碧图，图片请求增多，适用于页面图标较少的状况。

　　方案二：

　　媒体查询：

html {
    font-size: 10px
}
@media screen and (min-width: 321px) and (max-width: 375px) {
    html {
        font-size: 11px
    }
}
@media screen and (min-width: 376px) and (max-width: 414px) {
    html {
        font-size: 12px
    }
}
@media screen and (min-width: 415px) and (max-width: 639px) {
    html {
        font-size: 15px
    }
}
@media screen and (min-width: 640px) and (max-width: 719px) {
    html {
        font-size: 20px
    }
}
@media screen and (min-width: 720px) and (max-width: 749px) {
    html {
        font-size: 22.5px
    }
}
@media screen and (min-width: 750px) and (max-width: 799px) {
    html {
        font-size: 23.5px
    }
}
@media screen and (min-width: 800px) {
    html {
        font-size: 25px
    }
}　　

　　方案三：

<script>
        document.documentElement.style.fontSize = window.innerWidth/6.40 + 'px';
    </script>