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

前言

提到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/

  1. 大雄 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;

  2. 沈志敏 2017 年 2 月 10 日

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

    • 沈志敏 2017 年 4 月 14 日

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

  3. 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);

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

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

  5. 苇荡 2016 年 10 月 12 日

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

  6. 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’);

  7. 合伙热 2016 年 8 月 3 日

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

  8. 2016 年 7 月 21 日

  9. Gail 2016 年 5 月 25 日

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

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

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

  10. 黑阔大人 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 问题吗?

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

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

  12. cheezeslayer 2016 年 5 月 16 日

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

  13. blog看看 2016 年 4 月 27 日

    http://www.xttblog.com

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

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

  15. 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 日

      呵呵,固定了还兼容什么

  16. >_> 2016 年 4 月 3 日

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

    • F91 2016 年 4 月 3 日

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

  17. !!! 2016 年 3 月 30 日

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

  18. catscarlet 2016 年 3 月 28 日

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

  19. ~~~ 2016 年 3 月 28 日

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

    • TAT.tennylv

      吕鸣 2016 年 3 月 28 日

      笔误已修复[嘻嘻]

发表评论