TAT.tennylv 移动 web 适配利器-rem
In CSS3 on 2016年03月27日 by view: 91,695
35

前言

提到 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 即：

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

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

rem 基准值计算

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

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

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

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

4 iPhone6 的屏幕大小是 375px，

 

这样计算出来的 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 来设置即

 

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

 

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

 

iPhone6 下，正常显示 200px

在 iphone4 下，显示 169px

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

 

rem 适配进阶

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

 4 设置完之后配合 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.

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

  在 iphone6 下的显示：

在 android 下的显示：

 

rem 进行屏幕适配总结

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

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

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

在列举几个使用 rem 的线上网站：

网易新闻：http://3g.163.com/touch/news/subchannel/all?version=v_standard

聚划算：https://jhs.m.taobao.com/m/index.htm#!all

 

 

参考资料：http://www.nihaoshijie.com.cn/index.php/archives/593

 

原创文章转载请注明：

转载自AlloyTeam：http://www.alloyteam.com/2016/03/mobile-web-adaptation-tool-rem/

如果你觉得我们Alloyteam团队的博客和开源项目给你带来价值，可以通过捐赏支持我们
有你的支持，我们会做得更好！
分享到:0

  1. 颜海镜 2017 年 10 月 25 日

    http://yanhaijing.com/css/2017/09/29/principle-of-rem-layout/
    看看这里的原理解析，会更清楚一点

    回复

  2. 大雄 2017 年 5 月 31 日

    你好，我在开发移动端页面的时候使用了 rem 单位，因为美术稿是 720px 的，所以应用了如下的计算公式：document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.2 + ‘px’;
    目的就是让整个屏幕的尺寸等于 7.2rem，这种方法也在大部分机型上得到了有效应用，但是发现在三星、华为之类的机子上出现了 width、height 计算结果偏大的情况，请问这种情况该如何解决呢？

    回复
    • TAT.tennylv

      TAT.tennylv 2017 年 6 月 2 日

      有些机型或者 webview 获取不到宽高，需要兼容获取这些宽高 例如 document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth || window.screen.width;

      回复

  3. 沈志敏 2017 年 2 月 10 日

    我的理解是 直接通过 html 的 font-size 来控制缩放，这样只需要将 px 换算成 rem 即可，不需要通过动态改变 viewpoint，是不是也可以？

    回复

    • 沈志敏 2017 年 4 月 14 日

      改变 viewpoint 实际是为了解决 1px 问题，如果没有那么高的要求的话（1px 问题不用考虑）
      应该只是采用 rem 的就可以解决问题了

      回复

  4. lifeng 2017 年 1 月 13 日

    ! function(e) { function t(a) { if(i ) return i .exports; var n = i = { exports: {}, id: a, loaded: !1 }; return e .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(e, t) { var a = e || 100, n = t || 1, r = i.document, o = navigator.userAgent, d = o.match(/Android[Ss]+AppleWebkit/(d{3})/i), l = o.match(/U3/((d+|.){5,})/i), c = l && parseInt(l .split(“.”).join(“”), 10) >= 80, p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi), s = i.devicePixelRatio || 1; p || d && d > 534 || c || (s = 1); var u = 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 = a / 2 * s * n + “px” }, e.exports = t[“default”] }]); flex(100, 1);

    回复

  5. 移动web适配利器-rem | 老魏的工作笔记 2016 年 10 月 21 日

    […] 转载自 AlloyTeam：http://www.alloyteam.com/2016/03/mobile-web-adaptation-tool-rem/ […]

    回复

  6. 苇荡 2016 年 10 月 12 日

    升级 iOS10 之后，移动网页加载完瞬间字体变大，导致页面错乱，猜测加载完瞬间改变了 dpr，请问是否有研究？有木有什么好的解决办法？

    回复

  7. AlM. 2016 年 8 月 3 日

    document.documentElement.style.fontSize = (deviceWidth / 6.4 * devicePixelRatio) + ‘px’;document.querySelector(‘meta[name=”viewport”]’).setAttribute(‘content’, ‘initial-scale=’ + scale + ‘, maximum-scale=’ + scale + ‘, minimum-scale=’ + scale + ‘, user-scalable=no’);

    回复

  8. 合伙热 2016 年 8 月 3 日

    那么问题来了，6s 的 dpr 是 3，怎么适配

    回复

  9. 跟 2016 年 7 月 21 日

    回复

  10. Gail 2016 年 5 月 25 日

    亲爱的，750*1334 设计稿上的字号，我 css 该是多少？

    回复

    • 夏日米米茶 2016 年 6 月 22 日

      设计稿用 28px 字号，css 就是 14px 字号，因为设计图是 css 放大 2 倍后的尺寸

      回复

  11. 黑阔大人 2016 年 5 月 23 日

    机型是：vivo Y3 ，安卓版本是 5.0.2，浏览器使用的是微信。dpr 的值是 1.5。使用 js 改变 viewport 后，页面出现横向滚动条，但不影响布局，页面整体可以左右滑动有什么解决办法吗

    回复

    • AlM. 2016 年 8 月 4 日

      document.documentElement.style.fontSize = (deviceWidth / 6.4 * devicePixelRatio) + ‘px’;document.querySelector(‘meta[name=”viewport”]’).setAttribute(‘content’, ‘initial-scale=’ + scale + ‘, maximum-scale=’ + scale + ‘, minimum-scale=’ + scale + ‘, user-scalable=no’); 少年你没理解

      回复

      • 黑阔大人 2016 年 8 月 18 日

        我测试是部分安卓机型在微信浏览器中 viewport 的缩放后就会产生页面可以拖动的问题， document.addEventListener(‘DOMContentLoaded’, function(e) { document.getElementsByTagName(‘html’)[0].style.fontSize = window.innerWidth / 10 + ‘px’; }); 所以我现在就只是通过 rem 进行缩放处理没有用 viewport 的缩放就正常了 meta.setAttribute(‘content’, ‘width=device-width, initial-scale=’ + 1/dpr + ‘, maximum-scale=’ + 1/dpr + ‘, minimum-scale=’ + 1/dpr + ‘, user-scalable=no’);（这段代码剔除了）我觉得改变 fontSize 和 Viewport 的缩放两者作用重合了，不用改变 viewport，通过根字体大小改变 rem 就可以实现 web 适配了

        回复

        • 港迎 2016 年 8 月 31 日

          你能解决 1px 问题吗?

          回复

  12. ◕‿◕ME 2016 年 5 月 17 日

    rem 在实施过程中被五花八门的 android 设备坑的不要不要的，虽然 1、dpr 和最终渲染获取的宽度（innerwidth*dpr）得到的 dpr 不一致；2、部分浏览器设置禁止缩放（华为 pad 自带浏览器），连续点击屏幕依旧可缩放。3、使用 rem 依旧无法逃避设计给出的小于 12px 字体的问题。看淘宝好早就有在搞 rem 也很成熟，但不确定这些边边角角的设备上是啥样

    回复

  13. cheezeslayer 2016 年 5 月 16 日

    部分安卓机型会有问题，修改字体大小会导致展示问题。貌似是因为破坏了 1rem=16px 这个映射关系。有解决办法么？

    回复

  14. blog看看 2016 年 4 月 27 日

    http://www.xttblog.com

    回复

  15. 美图共赏 2016 年 4 月 14 日

    美图在这里:http://www.fydzv.com

    回复

  16. NailMan 2016 年 4 月 5 日

    看着网易新闻的移动网站，感觉就是根据窗口整体缩放 [思考]。那何不直接设置 viewport 的 width 为固定值 375 应该就可以了，这样就不用动态设置 html 的 font-size 了，只需设置为一个固定值就可以了，因为这时的固定值，比如 32px，其实就是浏览器窗口的 32/375。

    回复

    • Amrio 2016 年 4 月 17 日

      viewpoint 不匹配会让 1px 边框难以实现。
      讲真，这种方案让大屏幕很尴尬，大屏幕就是拿来看更多内容的，rem 活生生的把图片、字体、按钮放大了。我真要放大我会去系统里面设置的好吧，可怜我的 ipad 那么大的屏幕，每次遇到 rem 制作的页面就只显示一点点内容，感觉特别恶心，例如：http://m.mi.com/

      回复

    • M.R. 2016 年 4 月 28 日

      这个问题在 3G 站还在确定技术方案的时候我就提出过，如果使用 rem 布局，大屏应该显示更多内容，否则就应该使用固定 viewport 的做法，而产品方面似乎更倾向与和设计稿等比的样子。不过实际开始开发的时候我并没有参与，听说是因为在使用固定 viewport 的时候在一些国产浏览器上会有坑，比如自动缩放失效，使用 rem 似乎好了所以就全部用了 rem，不过后面发现使用 rem 在另一些国产浏览器上也会有坑，例如初次获取 viewport 宽度和渲染完成后的宽度不一样导致字体硕大无比，但已经确定了方案写了不少东西所以就这样了修修补补用下去了……这些对于移动端的讨论实际上还是比较理想化的，最近参与到 3G 站的开发，遇到了很多莫名其妙的坑，基本都是国产浏览器内核过旧导致的渲染、交互以及性能问题，很多问题根本无法用特性检测来处理，只能用很脏的代码解决，有时还不得不牺牲高版本浏览器的体验，只能说开发浏览器的都没有太考虑前端，so sad……

      回复

    • tina 2016 年 5 月 18 日

      呵呵，固定了还兼容什么

      回复

  17. >_> 2016 年 4 月 3 日

    em 的参照值不是父元素的字体大小，而是当前元素的字体大小的计算值。示例：https://jsfiddle.net/yLL8d588/

    回复

    • F91 2016 年 4 月 3 日

      恩, 如果当前元素没有设置字体大小就取他父元素的字体大小.

      回复

  18. ！！！ 2016 年 3 月 30 日

    对 svg 设置 width height 也会存在问题，前两天就遇到 svg 被剪切了

    回复

  19. catscarlet 2016 年 3 月 28 日

    km.oa.com 是内部域名么？图裂了

    回复

  20. ~~~ 2016 年 3 月 28 日

    前言中提到的”rm” 是神马

    回复
    • TAT.tennylv

      吕鸣 2016 年 3 月 28 日

      笔误已修复 [嘻嘻]

      回复
1 2

发表评论