移动端适配的三种方法之（三）rem是啥？实际工作怎样用它？

前言：正好最近有时间，给移动端适配这里做一个整理，全面并且深入地重新去理解这些代码的含义，不再只是代码的搬运工，不再只会像之前一样复制粘贴,这篇rem和em是因为我自己做了好几个移动端的rem了，都是组长算好告诉比率什么的直接用就行了，对于rem和em到底是个什么东西还是完全没有头绪的，所以上网查了一些资料，整理出这篇文章。如果觉得对你有帮助，麻烦点个赞~~

关键词：移动端适配，rem，em~~......

正文：

一、基本定义

rem,官方定义就是根据网页的根元素来设置字体大小。那也就是说，一旦网页的根元素的大小发生了变化，那rem也会相应的变化，以rem为单位的也会成比例放大或缩小。那不就是等价于可以适应我们各种手机屏幕吗？

二、rem和px互相转化

现在大部分浏览器IE9+，Firefox、Chrome、Safari、Opera ，如果我们不修改相关的字体配置，都是默认显示font-size是16px.。那既然rem就是根据网页的根元素来设置字体大小，那么如果我们想给一个div标签设置12px的字体大小那么用rem来写就是：

html {
    font-size:16px;
}
div {
    font-size: 0.75rem; //12÷16=0.75（rem）
}

就是16px代表着1rem，那12px是多少rem呢？就是12÷16=0.75rem。那么，当网页根元素字体改变时，我们以rem为单位的标签们会发生什么样的变化？举个栗子：

.box{
      width: 10rem;
      height: 10rem;
      background: red;
 }
<div class="box"></div>
//默认情况下

image.png

html {
    font-size: 17px;
}
.box{
      width: 10rem;
      height: 10rem;
      background: red;
 }
<div class="box"></div>

image.png

三、在工作中的应用-----写js(万能的js)

那我们怎样把它应用到我们的实际工作中去呢？大家都了解，在实际工作中，我们要面对各式各样的手机型号，他们的大小都不一样。但是我们收到的psd设计稿，往往只有一张。一般我们获取到的设计稿大部分是iphone6的，也就是最为常见的宽为750像素的设计稿。（事实上是我遇到的都是750像素的设计稿）而iPhone6的可视区在320px左右，所以在使用rem之前，我们一般会自觉的将所量出的宽高除以2。
既然rem是根据HTML根元素的fontsize大小来计算变化的，那我们就把根元素的fontsize设置为一个变量，这个变量根据移动端可视区宽度的变化而变化。
最初的做法是这样的：

document .getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';

这里为什么要除以10呢，其实这个值是随便定义的,因为不想让html的font-size太大。可是有没有发现如果这样计算的话，我们按照的设计稿的像素来制作还是会有出入的。所以，就接下来有了这个办法：

var baseWidth = 750,
    baseFontSize = 100;
document .getElementsByTagName('html')[0].style.fontSize = window.innerWidth / baseWidth * baseFontSize + 'px';

看懂了吗，没看懂的我来解释一下，看懂的就跳过。
我们现在有一个标准，就是设计稿。宽为750px,我们设根元素HTML的font-size为100px,这以便于后续测量后好计算，而事实上，很多都是以100为标准的。
现，我们有，标准版width750px,html{font-size:100px;},一部不知名手机，width = window.innerWidth，那么，现在有个问题，这个不知名的手机的HTML里面的font-size相应为多少？很简单的一道数学题。

750                         width
100px                         ?

? = width/750 *100 width/750其实就是该不知规格的手机与标准的比率。也就是说，标准的100px,对应了实用手机的1rem。那在psd中，我们所测量的所有的宽高长度，只要除以100，都是实际我们写在css里的以rem为单位的长宽高。
最后，让我们完善它：

<head>
    <script type="text/javascript">
        /*动态调整rem值,除以100*/
        function setsize() {
          var winW = document.documentElement.clientWidth,
              winH = document.documentElement.clientHeight,
            baseFontSize = 100,
            baseWidth = 750,
            winWidthSize = Math.min(winW, winH);
          if (winWidthSize < 270) {
            winWidthSize = 270;
          }
          var _html = document.getElementsByTagName('html')[0];
          _html.style.fontSize =winWidthSize / baseWidth * baseFontSize + 'px';
        }
        setsize();
    </script>
</head>

切记：既然是JS代码，为了避免造成因为动态设置<html>元素的font-size而造成页面抖动，一般这部分代码我们放在header底部去加载，并内联到html文档里面。

四、这里收录一个从博客里面看到的方法：

我们知道，一般我们获取到的视觉稿大部分是iphone6的，所以我们看到的尺寸一般是双倍大小的，在使用rem之前，我们一般会自觉的将标注/2，其实这也并无道理，但是当我们配合rem使用时，完全可以按照视觉稿上的尺寸来设置。

1 设计给的稿子双倍的原因是iphone6这种屏幕属于高清屏，也即是设备像素比(device pixel ratio)dpr比较大，所以显示的像素较为清晰。

2 一般手机的dpr是1，iphone4，iphone5这种高清屏是2，iphone6s plus这种高清屏是3，可以通过js的window.devicePixelRatio获取到当前设备的dpr，所以iphone6给的视觉稿大小是（*2）750×1334了。

3 拿到了dpr之后，我们就可以在viewport meta头里，取消让浏览器自动缩放页面，而自己去设置viewport的content例如（这里之所以要设置viewport是因为我们要实现border1px的效果，加入我给border设置了1px，在scale的影响下，高清屏中就会显示成0.5px的效果）

meta.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');

4 设置完之后配合rem，修改

@function px2rem($px){
    $rem : 75px;
    @return ($px/$rem) + rem;
}

双倍75，这样就可以完全按照视觉稿上的尺寸来了。不用在/2了，这样做的好处是：

1 解决了图片高清问题。

2 解决了border 1px问题（我们设置的1px，在iphone上，由于viewport的scale是0.5，所以就自然缩放成0.5px）

在iphone6下的例子：

我们使用动态设置viewport，在iphone6下，scale会被设置成1/2即0.5，其他手机是1/1即1.

meta.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');

我们的css代码，注意这里设置了1px的边框

.con {
            margin-top: 200px;
            width: 5.3rem;
            height: 5.3rem;
            border-top:1px solid #000;
 }

参考资料：移动web适配利器-rem：http://www.alloyteam.com/2016/03/mobile-web-adaptation-tool-rem/