不要再用 rem 来做手机适配了

记得我几天前写了一篇博客说面试了一哥们儿大谈特谈利用 rem 做手机适配,其实在部门内部,rem 用来做手机适配也有很大部分簇拥者。我是一个比较纯粹的工程师,所以不太喜欢这个方案,『纯粹』的意思是指,我不爱用 hack 的方式,来实现某些目的或者效果。hack 是指利用一些『本来是用来实现 A 的功能,却用貌似看起来巧妙的方式实现了 B』。不爱是因为,以我的经验,hack 的方式总是需要更多的代码去弥补 hack 带来的副作用,破坏了『简洁』和『直接』的美。

当然,如果是因为某些功能没有提供,非要用 hack 的方式来实现,我也不反对,hack 谁没用过呢。不过就手机屏幕适配而言,rem 真是还依然是唯一的途径吗?

这个问题我召集了 rem 布局簇拥者开会讨论,讨论来讨论去我能从他们那得出唯一我没法辩驳的结论是:因为 rem 布局是淘宝和网易都在用的一种方案,所以这个方案就是对的…… 这里请给我一个大大的『捂眼哭』的表情……

好吧,看起来我面对不是几个年轻前端工程师,而是『淘宝』和『网易』了,还真是会给我这老司机压力啊……不过老司机可不是被淘宝、网易唬成老司机的,先来看看 rem 布局方案的原理是什么。

小伙伴说了 n 多,后来我也上网查了相关资料(居然相关的英文资料很难搜到,我有那么一点点怀疑是不是我英文水品退步了关键词没写对,但这就是中国自己的『土方法』的可能性我认为更大一些,因为中国工程师是特别偏爱也擅长 hack 的),看起来都是差不多的原理:虽然网易和淘宝的方法本身也有不同,总之是将 rem 当成一个手机设备屏幕宽度的 1/n 长度,最常见的是一个 rem 等于 1/100 个手机屏幕宽度。嗯嗯……怎么有种熟悉的感觉,这特么不就是 vw 这个单位的定义么?!

vw unit
Equal to 1% of the width of the initial containing block.

上句引用自 w3 对 vw 的定义,翻译过来就是 vw = 1% 视窗的宽度。『initial containing block』根据上下文就是指设备的屏幕宽度。

所以有了这个单位,根本不需要为了不同宽度的设备做不同的 rem 宽度设置,也不需要用 JS 去算 1% 设备屏幕宽度是多少 px 然后设置给 rem。还要用 JS 去算,我都惊了,果真客户端反正都是用户的,多花资源和时间去重渲染页面也无所谓是吧。

我比较纳闷的是,就算有 vw 这个单位并且目前支持度也不错了,还是有小伙伴坚持要用 rem,虽然也说不出什么具体原因来,就是要抱着那些 n 年前写的 rem 布局的文章不放(当然,这些古老的文章我认为还是有其历史意义的,那个时候 vw 这个单位应该不如现在支持度那么高,是没有办法的 hack)。另外这些人都不会觉得 rem —— 以及受影响的 em —— 本来的功能很有可能要用么?我发现工程师这个按理来说应该最理智的团体,居然也有那么多人迷信,只不过迷信的对象是所谓的『权威』罢了,有的甚至是太过虔诚,以至于『权威』顺应时代自己都开始改变了,也没什么感知。

最近在网上看到一篇新写的文章,除了在新时代重新推广 rem 布局,还详细介绍和讨论了自己『发明』的利用 vw 单位来设置 rem 的长度而不用 JS……少年……你的脑筋真是惊奇啊……

至于大家关心的 vw 的兼容性问题,既然我提到『新时代』,那说明 vw 的春天已经到来了。如果你真的关心兼容性,想必你自己也会去尝试 iOS 和 Android 上各种浏览器,包括微信,以及淘宝扫码时调用的内置浏览器……自己尝试过的,才是最真实的。

这篇文章分享到出去之后,没想到看的人不少,也有不少人感到不可思议,vw 居然不要做向下兼容,还有说当年用 vw 被狂批的?哭笑不得哭笑不得哭笑不得,好想知道当年是哪年?兼容性问题上面一段我已经说出我的结论,不过回复的内容我倒是感到有点失望,现在依然还有这么多工程师讨论问题都辣么粗狂,居然没有一个回复是提供数据,连 caniuse 也没人提……相比之下本博客里的那个回复,我真得好好珍惜……嗯下一篇博客有内容可聊了。

然后剩下的一部分回复,问不用 rem 那用什么呢?这……我提了那么多次 vw…… 就是让你用 vw 来代替 rem 呗……

不知道大家是不是把 rem 设置成了某个比较好算的宽度,所以切图更得心应手,但 vw 其实是 1% 个屏幕宽度,如同这篇文章第一个回复里说的,这样算起来不方便。的确,这我觉得算是一个 vw 不好的地方。但是,作为一名与时俱进的前端工程师,你知道 CSS3 有个函数叫 calc 吗?有人可能会说 calc 目前支持度还有点问题。你知道 SASS 或者 LESS 吧?你知道它们是可以做算术题的吧?你知道它们可以写 function 吧?

wx pay

CC BY-NC-ND 4.0 不要再用 rem 来做手机适配了 by Chrisyue's Blog is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.

不要再用 rem 来做手机适配了》上有12条评论

  1. whidy

    我觉得提出这个思路和质疑是好的。不过我觉得有点偏激。理想很骨感现实很残酷。至少在当下环境个人觉得rem还是最佳方案。

    回复
    1. Chris Yue 文章作者

      其实当前的环境是,懒于独立思考和实践,对『权威』的盲目崇拜,是普遍现象,那叫『集体』偏激,我想通过『不要再……』系列文章对一些不再适用的『金科玉律』提出质疑,给集体偏激降降温。

      至于你说的当前环境下 rem 还依然最佳,不妨说出你的理由?我不知道你是不是指兼容性问题,如果是我不知道你有没有数据支撑,至少我让测试的部门所有手机,vw 支持度接近 100%,而且那是在好几个月前就做过的测试,caniuse 上也显示移动端对 vw 的支持度已经很高了。

  2. x

    其实rem这个东西的出现是为了让前端能完美还原设计稿。因为美工设计的时候,单位用的是像素,而前端想在不同屏幕上完全还原设计稿,就必须要有一套换算过程。诚然,如果美工在给图的时候不是标的像素而是百分比,那么直接用vh,vw都是可以的,但是实际情况下,他们只会标出像素,如果你自己去换成百分比,那又会花费大量的时间,而且算出来的百分比也会对还原图有一定的误差。

    回复
    1. Chris Yue 文章作者

      就喜欢你这种能说出具体理由的。

      rem 的确可以定义成自己觉得方便的宽度,不过综合考虑引入这种方式的带来的优缺点,我还是觉得不划算。

      从两个方面来说:

      1. rem 完全成了布局用的单位,而失去了此单位本来的意义,但它本来的意义是我可能本来就要用到的
      2. 我相信现在的前端工具是一定可以很方便的从 px 转换到 vw(使用 sass 自定义函数),或者用 calc 函数也行,虽然现在支持度还待观望

发表评论

电子邮件地址不会被公开。

four + two =