rem 是如何实现自适应布局的？（长文）

rem 是相对于根元素，这样就意味着，我们只需要在根元素确定一个 px 字号，则可以来算出元素的宽高。本文讲的是如何使用 rem 实现自适应。

最后更新于 2025-06-01

本页目录10 节

根应设置为大于 10 的值，我常用的为：

1
html {
2
 font-size: 100px;
3
}

此文太好，但未获得作者授权。

来源：

http://caibaojian.com/web-app-rem.html

原文链接：http://caibaojian.com/web-app-rem.html

rem 这是个低调的 css 单位，近一两年开始崭露头角，有许多同学对 rem 的评价不一，有的在尝试使用，有的在使用过程中遇到坑就弃用了。但是我对 rem 综合评价是用来做 web app 它绝对是最合适的人选之一。·

rem 是什么？

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到 rem 大家一定会想起 em 单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

为什么 web app 要使用 rem？

这里我特别强调 web app，web page 就不能使用 rem 吗，其实也当然可以，不过出于兼容性的考虑在 web app 下使用更加能突显这个单位的价值和能力，接下来我们来看看目前一些企业的 web app 是怎么做屏幕适配的。

1、实现强大的屏幕适配布局：

最近 iphone6 一下出了两款尺寸的手机，导致的移动端的屏幕种类更加的混乱，记得一两年前做 web app 有一种做法是以 320 宽度为标准去做适配，超过 320 的大小还是以 320 的规格去展示，这种实现方式以淘宝 web app 为代表作，但是近期手机淘宝首页进行了改版，采用了 rem 这个单位，首页以内依旧是和以前一样各种混乱，有定死宽度的页面，也有那种流式布局的页面。

我们现在在切页面布局的使用常用的单位是 px，这是一个绝对单位，web app 的屏幕适配有很多中做法，例如：流式布局、限死宽度，还有就是通过响应式来做，但是这些方案都不是最佳的解决方法。

例如流式布局的解决方案有不少弊端，它虽然可以让各种屏幕都适配，但是显示的效果极其的不好，因为只有几个尺寸的手机能够完美的显示出视觉设计师和交互最想要的效果，但是目前行业里用流式布局切 web app 的公司还是挺多的，看看下面我收集的一些案例：

上面的网站都是采用的流式布局的技术实现的，他们在页面布局的时候都是通过百分比来定义宽度，但是高度大都是用 px 来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度还是和原来一样，实际显示非常的不协调，这就是流式布局的最致命的缺点，往往只有几个尺寸的手机下看到的效果是令人满意的，其实很多视觉设计师应该无法接受这种效果，因为他们的设计图在大屏幕手机下看到的效果相当于是被横向拉长来一样。·

流式布局并不是最理想的实现方式，通过大量的百分比布局，会经常出现许多兼容性的问题，还有就是对设计有很多的限制，因为他们在设计之初就需要考虑流式布局对元素造成的影响，只能设计横向拉伸的元素布局，设计的时候存在很多局限性。

2.固定宽度做法

还有一种是固定页面宽度的做法，早期有些网站把页面设置成 320 的宽度，超出部分留白，这样做视觉，前端都挺开心，视觉在也不用被流式布局限制自己的设计灵感了，前端也不用在搞坑爹的流式布局。但是这种解决方案也是存在一些问题，例如在大屏幕手机下两边是留白的，还有一个就是大屏幕手机下看起来页面会特别小，操作的按钮也很小，手机淘宝首页起初是这么做的，但近期改版了，采用了 rem。

3.响应式做法

响应式这种方式在国内很少有大型企业的复杂性的网站在移动端用这种方法去做，主要原因是工作大，维护性难，所以一般都是中小型的门户或者博客类站点会采用响应式的方法从 web page 到 web app 直接一步到位，因为这样反而可以节约成本，不用再专门为自己的网站做一个 web app 的版本。

4.设置 viewport 进行缩放

天猫的 web app 的首页就是采用这种方式去做的，以 320 宽度为基准，进行缩放，最大缩放为 320*1.3 = 416，基本缩放到 416 都就可以兼容 iphone6 plus 的屏幕了，这个方法简单粗暴，又高效。说实话我觉得他和用接下去我们要讲的 rem 都非常高效，不过有部分同学使用过程中反应缩放会导致有些页面元素会糊的情况。

1
<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">

rem 能等比例适配所有屏幕

上面讲了一大堆目前大部分公司主流的一些 web app 的适配解决方案，接下来讲下 rem 是如何工作的。·

上面说过 rem 是通过根元素进行适配的，网页中的根元素指的是 html 我们通过设置 html 的字体大小就可以控制 rem 的大小。举个例子：

1
html{
2
    font-size:20px;
3
}
4
.btn {
5
    width: 6rem;
6
    height: 3rem;
7
    line-height: 3rem;
8
    font-size: 1.2rem;
9
    display: inline-block;
10
    background: #06c;
11
    color: #fff;
12
    border-radius: .5rem;
13
    text-decoration: none;
14
    text-align: center;
15
}

Demo 上面代码结果按钮大小如下图：

我把 html 设置成 10px 是为了方便我们计算，为什么 6rem 等于 60px。如果这个时候我们的.btn 的样式不变，我们再改变 html 的 font-size 的值，看看按钮发生上面变化:

1
html{
2
    font-size:40px;
3
}

Demo

按钮大小结果如下：

在上面两个例子中我们发现第一个案例按钮是等比例放大到第二个按钮，html font-size 的改变就会导致按钮的大小发生改变，我们并不需要改变先前给按钮设置的宽度和高度，其实这就是我们最想看到的，

由上面两个的 demo 中我们知道改变 html 的 font-size 可以等比改变所有用了 rem 单位的元素，所以大家可以通过 chrome 浏览器的调试工具去切换第三个的 demo 在不同设备下的展示效果，或者通过缩放浏览器的宽度来查看效果，我们可以看到不管在任何分辨率下，页面的排版都是按照等比例进行切换，并且布局没有乱。我只是通过一段 js 根据浏览器当前的分辨率改变 font-size 的值，就简单的实现了上面的效果，页面的所有元素都不需要进行任何改变。·

到这里肯定有很多人会问我是怎么计算出不同分辨率下 font-size 的值？

首先假设我上面的页面设计稿给我时候是按照 640 的标准尺寸给我的前提下，（当然这个尺寸肯定不一定是 640，可以是 320，或者 480，又或是 375）来看一组表格。

上面的表格蓝色一列是 Demo3 中页面的尺寸，页面是以 640 的宽度去切的，怎么计算不同宽度下 font-site 的值，大家看表格上面的数值变化应该能明白。举个例子：384/640 = 0.6，384 是 640 的 0.6 倍，所以 384 页面宽度下的 font-size 也等于它的 0.6 倍，这时 384 的 font-size 就等于 12px。在不同设备的宽度计算方式以此类推。·

Demo3 中我是通过 JS 去动态计算根元素的 font-size，这样的好处是所有设备分辨率都能兼容适配，淘宝首页目前就是用的 JS 计算。但其实不用 JS 我们也可以做适配，一般我们在做 web app 都会先统计自己网站有哪些主流的屏幕设备，然后去针对那些设备去做 media query 设置也可以实现适配，例如下面这样：

1
html {
2
    font-size : 20px;
3
}
4
@media only screen and (min-width: 401px){
5
    html {
6
        font-size: 25px !important;
7
    }
8
}
9
@media only screen and (min-width: 428px){
10
    html {
11
        font-size: 26.75px !important;
12
    }
13
}
14
@media only screen and (min-width: 481px){
15
    html {
16
        font-size: 30px !important;
17
    }
18
}
19
@media only screen and (min-width: 569px){
20
    html {
21
        font-size: 35px !important;
22
    }
23
}
24
@media only screen and (min-width: 641px){
25
    html {
26
        font-size: 40px !important;
27
    }
28
}

面的做的设置当然是不能所有设备全适配，但是用 JS 是可以实现全适配。具体用哪个就要根据自己的实际工作场景去定了。·

下面推荐两个国内用了 rem 技术的移动站，大家可以上去参考看看他们的做法，手机淘宝目前只有首页用了 rem，淘宝 native app 的首页是内嵌的 web app 首页。

淘宝首页：m.taobao.com

D X：m.dx.com

最后我们再来看一看他的兼容性：

在线工具

@blinkcat，rem 是可以合并雪碧图的，viewport 设置确实简洁，但是过于粗暴，全局都进行缩放，有时候我布局并不希望全局缩放，部分布局希望不用缩放，所以使用 rem，不过具体使用什么方法大家都可以根据实际情况衡量。并不是每个人都喜欢使用 sass，所以在 px 转 rem 这块我做了一个在线转换工具：http://520ued.com/tools/rem·

REM 自适应 JS

具体使用方法请参考这篇文章：Rem 精简版实现自适应-优化 flexible.js

1
//designWidth:设计稿的实际宽度值，需要根据实际设置
2
//maxWidth:制作稿的最大宽度值，需要根据实际设置
3
//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
4
;(function(designWidth, maxWidth) {
5
  var doc = document,
6
  win = window,
7
  docEl = doc.documentElement,
8
  remStyle = document.createElement("style"),
9
  tid;
10

11
  function refreshRem() {
12
    var width = docEl.getBoundingClientRect().width;
13
    maxWidth = maxWidth || 540;
14
    width>maxWidth && (width=maxWidth);
15
    var rem = width * 100 / designWidth;
16
    remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
17
  }
18

19
  if (docEl.firstElementChild) {
20
    docEl.firstElementChild.appendChild(remStyle);
21
  } else {
22
    var wrap = doc.createElement("div");
23
    wrap.appendChild(remStyle);
24
    doc.write(wrap.innerHTML);
25
    wrap = null;
26
  }
27
  //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
28
  refreshRem();
29

30
  win.addEventListener("resize", function() {
31
    clearTimeout(tid); //防止执行两次
32
    tid = setTimeout(refreshRem, 300);
33
  }, false);
34

35
  win.addEventListener("pageshow", function(e) {
36
    if (e.persisted) { // 浏览器后退的时候重新计算
37
      clearTimeout(tid);
38
      tid = setTimeout(refreshRem, 300);
39
    }
40
  }, false);
41

42
  if (doc.readyState === "complete") {
43
    doc.body.style.fontSize = "16px";
44
  } else {
45
    doc.addEventListener("DOMContentLoaded", function(e) {
46
      doc.body.style.fontSize = "16px";
47
    }, false);
48
  }
49
})(750, 750);

部分文章参考：web app 变革之 rem

来源：前端开发博客

阅读偏好

工具