前言

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

 

兼容性

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

ios：6.1 系统以上都支持

android：2.1 系统以上都支持

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

 

rem 设置字体大小

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

，

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

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

 

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

 

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

 

rem 进行屏幕适配

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

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

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

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

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

rem 适配

先看一个简单的例子：

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

再来看看结果：

这时 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 即：

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