移动 Web 适配：rem

提到rem，大家首先会想到的是em，px，pt这类的词语，大多数人眼中这些单位是用于设置字体的大小的，没错这的确是用来设置字体大小的，但是对于rem来说它可以用来做移动端的响应式适配哦。

01兼容性

先看看兼容性，关于移动端

• ios：6.1系统以上都支持

• android：2.1系统以上都支持

大部分主流浏览器都支持，可以安心的往下看了。

02rem设置字体大小

rem是（font size of the root element），官方解释

意思就是根据网页的根元素来设置字体大小，和em（font size of the element）的区别是，em是根据其父元素的字体大小来设置，而rem是根据网页的跟元素（html）来设置字体大小的，举一个简单的例子，

现在大部分浏览器IE9+，Firefox、Chrome、Safari、Opera ，如果我们不修改相关的字体配置，都是默认显示font-size是16px即

html { font-size:16px;}

那么如果我们想给一个P标签设置12px的字体大小那么用rem来写就是

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

基本上使用rem这个单位来设置字体大小基本上是这个套路，好处是假如用户自己修改了浏览器的默认字体大小，那么使用rem时就可以根据用户的调整的大小来显示了。 但是rem不仅可以适用于字体，同样可以用于width height margin这些样式的单位。下面来具体说一下

03rem进行屏幕适配

在讲rem屏幕适配之前，先说一下一般做移动端适配的方法，一般可以分为：

1. 简单一点的页面，一般高度直接设置成固定值，宽度一般撑满整个屏幕。

2. 稍复杂一些的是利用百分比设置元素的大小来进行适配，或者利用flex等css去设置一些需要定制的宽度。

3. 再复杂一些的响应式页面，需要利用css3的media query属性来进行适配，大致思路是根据屏幕不同大小，来设置对应的css样式。

上面的一些方法，其实也可以解决屏幕适配等问题，但是既然出来的rem这个新东西，也一定能兼顾到这些方面，下面具体使用rem：

rem适配

先看一个简单的例子：

.con { width: 10rem; height: 10rem; background-color: red; }<div class="con"></div>

这是一个div，宽度和高度都用rem来设置了，在浏览器里面是这样显示的， 可以看到，在浏览器里面width和height分别是160px，正好是16px * 10,那么如果将html根元素的默认font-size修改一下呢？

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

再来看看结果：

这时width和height都是170px，这就说明了将rem应用与width和height时，同样适用rem的特性，根据根元素的font-size值来改变自身的值，由此我们应该可以联想到我们可以给html设定不同的值，从而达到我们css样式中的适配效果。

rem数值计算

如果利用rem来设置css的值，一般要通过一层计算才行，比如如果要设置一个长宽为100px的div，那么就需要计算出100px对应的rem值是 100 / 16 =6.25rem，这在我们写css中，其实算比较繁琐的一步操作了。

对于没有使用sass的工程：

为了方便起见，可以将html的font-size设置成100px，这样在写单位时，直接将数值除以100在加上rem的单位就可以了。

对于使用sass的工程：

前端构建中，完全可以利用scss来解决这个问题，例如我们可以写一个scss的function px2rem即：

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

这样，当我们写具体数值的时候就可以写成：

height: px2rem(90px);width: px2rem(90px);;

看到这里，你可能会发现一些不理解的地方，就是上面那个rem:37.5px是怎么来的，正常情况下不是默认的16px么，这个其实就是页面的基准值，和html的font-size有关。

rem基准值计算

关于rem的基准值，也就是上面那个37.5px其实是根据我们所拿到的视觉稿来决定的，主要有以下几点原因：

1. 由于我们所写出的页面是要在不同的屏幕大小设备上运行的

2. 所以我们在写样式的时候必须要先以一个确定的屏幕来作为参考，这个就由我们拿到的视觉稿来定

3. 假如我们拿到的视觉稿是以iphone6的屏幕为基准设计的

4. iPhone6的屏幕大小是375px，

rem = window.innerWidth / 10

这样计算出来的rem基准值就是37.5（iphone6的视觉稿），这里为什么要除以10呢，其实这个值是随便定义的,因为不想让html的font-size太大，当然也可以选择不除，只要在后面动态js计算时保证一样的值就可以，在这里列举一下其他手机的

• iphone3gs: 320px / 10 = 32px

• iphone4/5: 320px / 10 = 32px

• iphone6: 375px / 10 =37.5px

动态设置html的font-size

现在关键问题来了，我们该如何通过不同的屏幕去动态设置html的font-size呢，这里一般分为两种办法

1利用css的media query来设置即

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ html{font-size: 37.5px;}}

2利用java来动态设置 根据我们之前算出的基准值，我们可以利用js动态算出当前屏幕所适配的font-size即：

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

然后我们看一下之前那个demo展示的效果

.con { width: px2rem(200px); height: px2rem(200px); background-color: red;}<div class="con"></div>document.addEventListener('DOMContentLoaded', function(e) { document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';}, false);

iPhone6下，正常显示200px

在iphone4下，显示169px

由此可见我们可以通过设置不同的html基础值来达到在不同页面适配的目的，当然在使用js来设置时，需要绑定页面的resize事件来达到变化时更新html的font-size。

04rem适配进阶

我们知道，一般我们获取到的视觉稿大部分是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;}

在iphone6下的显示：

在android下的显示：

05rem进行屏幕适配总结

下面这个网址是针对rem来写的一个简单的demo页面，大家可以在不同的手机上看一下效果

但是rem也并不是万能的，下面也有一些场景是不适于使用rem的

1 当用作图片或者一些不能缩放的展示时，必须要使用固定的px值，因为缩放可能会导致图片压缩变形等。

• 此方案仅适用于移动端web
• 文章底部常见问题说明第四条，笔者已给出一个相当便捷的解决方案。

该方案使用相当简单，把下面这段已压缩过的 原生JS（仅1kb，源码已在文章底部更新） 放到 HTML 的 head 标签中即可（注:不要手动设置viewport，该方案自动帮你设置）

<script>!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(normal,e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=normal?1:1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=normal?"50px": a/2*s*n+"px"},e.exports=t["default"]}]);  flex(false,100, 1);</script>

代码原理

这是阿里团队的高清方案布局代码，所谓高清方案就是利用rem的特性（我们知道默认情况下html的1rem = 16px），根据设备屏幕的DPR（设备像素比，又称DPPX，比如dpr=2时，表示1个CSS像素由4个物理像素点组成）根据设备DPR调整页面的压缩比率（即：1/dpr），同时动态设置 html 的font-size为（50 * dpr)，进而达到高清效果。

有何优势

• 引用简单，布局简便
• 根据设备屏幕的DPR,自动设置最合适的高清缩放。
• 保证了不同设备下视觉体验的一致性。（老方案是，屏幕越大元素越大；此方案是，屏幕越大，看的越多）
• 有效解决移动端真实1px问题（这里的1px 是设备屏幕上的物理像素）

如何使用

重要的事情说三遍！
绝不是每个地方都要用rem，rem只适用于固定尺寸！
绝不是每个地方都要用rem，rem只适用于固定尺寸！
绝不是每个地方都要用rem，rem只适用于固定尺寸！
在相当数量的布局情境中（比如底部导航元素平分屏幕宽，大尺寸元素），你必须使用百分比或者flex才能完美布局！
看过 《手机端页面自适应解决方案—rem布局》的朋友，应该对rem有所了解，这里不再赘述，
此方案也是默认 1rem = 100px，所以你布局的时候，完全可以按照设计师给你的效果图写各种尺寸啦。
比如你在效果图上量取的某个按钮元素长 55px, 宽37px ，那你直接可以这样写样式：

.myBtn {
   width: 0.55rem;
   height: 0.37rem;
}

rem布局（进阶版）实践应用

iPhone5 下页面效果.png

iPhone 6 Plus 下页面效果.png

许多同学对该方案存在不少误解导致使用出现各种问题，这里统一回复下。

1.问：为啥手机网页效果图宽度是要640或者750的，我非得弄个666的不行咩？

答：老实说当然可以，不过为了规范，640或者750是相对合适的。
拿Iphone 5s 举例，它的css像素宽度是320px，由于它的dpr=2，所以它的物理像素宽度为320 × 2 = 640px，这也就是为什么，你在5s上截了一张图，在电脑上打开，它的原始宽度是640px的原因。
那 iphone 6 的截图宽度呢？ 375 × 2 = 750
那 iphone 6 sp 的截图宽度呢？ 414 × 3 = 1242
以此类推，你现在能明白效果图为什么一般是 640 ，750 甚至是 1242 的原因了么？（真没有歧视安卓机的意思。。。）

2.问：宽度用rem写的情况下， 在 iphone6 上没问题， 在 iphone5上会有横向滚动条，何解？

答：假设你的效果图宽度是750，在这个效果图上可能有一个宽度为7rem（高清方案默认 1rem = 100px）的元素。我们知道，高清方案的特点就是几乎完美还原效果图，也就是说，你写了一个宽度为 7rem 的元素，那么在目前主流移动设备上都是7rem。然而，iphone 5 的宽度为640，也就是6.4rem。于是横向滚动条不可避免的出现了。
怎么办呢？ 这是我目前推荐的比较安全的方式：如果元素的宽度超过效果图宽度的一半（效果图宽为640或750），果断使用百分比宽度，或者flex布局。就像把等屏宽的图片宽度设为100%一样。

3.问：不是 1rem = 100px吗，为什么我的代码写了一个宽度为3rem的元素，在电脑端的谷歌浏览器上宽度只有150px?

答：先说高清方案代码，再次强调咱们的高清方案代码是根据设备的dpr动态设置html 的 font-size，
如果dpr=1(如电脑端），则html的font-size为50px，此时 1rem = 50px
如果dpr=2(如iphone 5 和 6），则html的font-size为100px，此时 1rem = 100px
如果dpr=3(如iphone 6 sp），则html的font-size为150px，此时 1rem = 150px
如果dpr为其他值，即便不是整数，如3.4 , 也是一样直接将dpr 乘以 50 。

再来说说效果图，一般来讲，我们的效果图宽度要么是640，要么是750，无论哪一个，它们对应设备的dpr=2，此时，1 rem = 50 × 2 = 100px。这也就是为什么高清方案默认1rem = 100px。而将1rem默认100px也是好处多多，可以帮你快速换算单位，比如在750宽度下的效果图，某元素宽度为53px，那么css宽度直接设为53/100=0.53rem了。

然而极少情况下，有设计师将效果图宽定为1242px，因为他手里只有一个iphone 6 sp (dpr = 3)，设计完效果图刚好可以在他的iphone 6 sp里查看调整。一切完毕之后，他将这个效果图交给你来切图。由于这个效果图对应设备的dpr=3，也就是1rem = 50 × 3 = 150px。所以如果你量取了一个宽度为90px的元素，它的css宽度应该为 90/150=0.6rem。由于咱们的高清方案默认1rem=100px，为了还原效果图，你需要这样换算。当然，一个技巧就是你可以直接修改咱们的高清方案的默认设置。在代码的最后 你会看到 flex(false, 100, 1) ，将其修改成flex(false, 66.66667, 1)（感谢简友：V旅行指出此处错误！ 2017/3/24）就不用那么麻烦的换算了，此时那个90px的直接写成0.9rem就可以了。

4.问：在此方案下，我如果引用了别的UI库，那些UI库的元素会显得特别小，如何解决？

答：可以这样去理解问题的原因，如果不用高清方案，别的UI库的元素在移动设备上（假设这个设备是iphone 5好了）显示是正常的，这没有问题，然后我们在这个设备上将该页面截图放到电脑上看，发现宽度是640（问答1解释过了），根据你的像素眼大致测量，你发现这个设备上的某个字体大小应该是12px，而你在电脑上测量应该是24px。

现在我们使用高清方案去还原这个页面，那么字体大小应该写为 0.24rem 才对！

所以，如果你引用了其他的UI库，为了兼容高清方案，你需要对该UI库里凡是应用px的地方做相应处理，即： a px => a*0.02 rem
(具体处理方式因人而异，有模块化开发经验的同学可使用类似的 px2rem 的插件去转化，也可以完全手动处理）

---

然而真实情况往往更为复杂，比如，你引入了百度地图（N个样式需要处理转换）；或者你引入了一个
framework；又或者你使用了 video 标签，上面默认的尺寸样式很难处理。等等这些棘手问题

面对这些情况，此时我们的高清方案如果不再压缩页面，那么以上问题将迎刃而解。
基于这样的思路，笔者对高清方案的源码做了如下修改，即添加一个叫做 normal 的参数，由它来控制页面是否压缩。
在文章顶部代码的最后，你会看到 flex(false, 100, 1)，默认情况下页面是开启压缩的。

如果你需要禁止压缩，由于我们的源码执行后，直接将flex函数挂载到全局变量window上了，此时你直接在需要禁止压缩的页面执行 window.flex(true) 就可以了，而rem的用法保持不变。

有一点美中不足的是，如果禁止了页面压缩，高清屏的1像素就不能实现了，如果你必须要实现1像素，那么自行谷歌：css 0.5像素，有N多的解决方案，这里不再赘述。

5.问：有时候字体会不受控制的变大，怎么办？

答：在X5新内核Blink中，在排版页面的时候，会主动对字体进行放大，会检测页面中的主字体，当某一块字体在我们的判定规则中，认为字号较小，并且是页面中的主要字体，就会采取主动放大的操作。然而这不是我们想要的，可以采取给最大高度解决

解决方案：

*, *:before, *:after { max-height: 100000px }

补充：有同学反映，在一些情况下 textarea 标签内的字体大小即便加上上面的方案，字体也会变大，无法控制。此时你需要给 textarea 的 display 设为 table 或者 inline-table 即可恢复正常。（感谢 程序媛喵喵 对此的补充！）

6.问：我在底部导航用的flex感觉更合适一些，请问这样子混着用可以吗？

答：咱们的rem适合写固定尺寸。其余的根据需要换成flex或者百分比。源码示例中就有这三种的综合运用。

7.问：在高清方案下，一个标准的，较为理想的宽度为640的页面效果图应该是怎样的？

点击浏览：一个标准的640手机页面设计稿参考（没错，在此方案中，你可以完全按照这张设计稿的尺寸写布局了。就是这么简单！）

8.问：用了这个方案如何使用媒体查询呢？

一般来讲，使用了这个方案是没必要用媒体查询了，如果你必须要用，假设你要对 iphone5 （css像素宽度320px,
这里需要取其物理像素，也就是640）宽度下的类名做处理，你可以这样

@media screen and (max-width: 640px) {
    .yourLayout {
        width:100%;
    }
}

9.问：可以提供下这个高清方案的源码吗？

'use strict';

/**
 * @param {Boolean} [normal = false] - 默认开启页面压缩以使页面高清;  
 * @param {Number} [baseFontSize = 100] - 基础fontSize, 默认100px;
 * @param {Number} [fontscale = 1] - 有的业务希望能放大一定比例的字体;
 */
const win = window;
export default win.flex = (normal, baseFontSize, fontscale) => {
  const _baseFontSize = baseFontSize || 100;
  const _fontscale = fontscale || 1;

  const doc = win.document;
  const ua = navigator.userAgent;
  const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
  const UCversion = ua.match(/U3\/((\d+|\.){5,})/i);
  const isUCHd = UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80;
  const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
  let dpr = win.devicePixelRatio || 1;
  if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {
    // 如果非iOS, 非Android4.3以上, 非UC内核, 就不执行高清, dpr设为1;
    dpr = 1;
  }
  const scale = normal ? 1 : 1 / dpr;

  let metaEl = doc.querySelector('meta[name="viewport"]');
  if (!metaEl) {
    metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    doc.head.appendChild(metaEl);
  }
  metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);
  doc.documentElement.style.fontSize = normal ? '50px' : `${_baseFontSize / 2 * dpr * _fontscale}px`;
};