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

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

Chris Yue 17 comments
Posts

记得我几天前写了一篇博客说面试了一哥们儿大谈特谈利用 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 吧?

不要再用 rem 来做手机适配了 by Chris Yue is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.

17 Comments

a

八月 25, 2018 在 10:04 上午

vw配合rem也是没有办法啊, 不然你在ipad或者pc上看页面会巨大无比,因为你没办法给vw一个最大值啊,不然你说出一个更好的方案

    Chris Yue

    八月 28, 2018 在 7:50 上午

    能举一个具体的例子吗?

     

    a

    八月 28, 2018 在 8:02 上午

    在手机上用vw还好,但是在pc上看1vw就非常大了,之前用rem可以给html根元素设置字体最大值来限制,但是如果所有元素都用vw怎么限制?所以折中的办法是给html的根元素使用vw来代替js计算,子元素还是用rem

     

    Chris Yue

    八月 30, 2018 在 9:10 上午

    我其实问的是你想要实现的效果,不过我大概能猜到一些。

    你的问题其实更应该是:如果想要桌面端和移动端(各种 Pad + 手机)共用一套前端代码,有一些什么样的方案并且哪种方案更好。你说的可能也是方案的一种,相比较已经很成熟的响应式设计方案(bootstrap/foundation)我觉得并没有什么优势。

    我的标题有两个字『手机』,本来就没有建议大家桌面端也非要用 vw。

    另外,我还是不太知道你的例子用 vw 来设置 rem 是怎么就可以不用 js 做到桌面不会『巨大无比』的。这个地方我很有兴趣了解,我猜跟 bootstrap 一样也是用 media query?。

    再另外,使用 rem 还有另外一个问题,这个问题本质上叫做:在可以不用 hack 的方式的时候,是否还要倾向于用 hack 的方式?

    什么叫 hack,用一种本来解决 A 需求的技术(往往要绕点弯)来解决 B 需求。rem 用在布局上就是一种典型(rem 本质上是一种特别的 em)。

    不仅是前端,在任何开发阶段我们经常可以听到类似『这个地方可以用 xxx 处理,xxx 就是用来处理这种问题的』『不能用 xxx 处理,之前为了方便我用了 yyy 方式,在这里用不了 xxx 了,会有影响』『哦』这种对话,其实用 hack 本质是为了方(tou)便(lan),但其实方便了吗?真的很有可能相反,特别是从团队合作的角度。

     

grewer

六月 14, 2018 在 2:47 下午

详细地项目适配方案:
vue: https://www.w3cplus.com/mobile/vw-layout-in-vue.html
react: https://segmentfault.com/a/1190000014185590
vw 已经有polyfill,希望广大工程师能进一步推广,而不是固步自封,一直用rem

yy

十一月 9, 2017 在 10:39 上午

感谢博主分享~~

XuJinNet

十月 17, 2017 在 2:34 下午

谢谢 @Chris Yue 提供了一个好的思路,值得尝试

匿名人士

十月 17, 2017 在 11:58 上午

vm是大趋势啊,现在就是看兼容要求了。

    Chris Yue

    十月 17, 2017 在 12:29 下午

    老大,是 vw。
    另外兼容性你试试不就知道了。

     

小白

十月 17, 2017 在 11:42 上午

就算设计图用了vw,那么高度呢,vh?

    Chris Yue

    十月 17, 2017 在 12:11 下午

    你提 vh 是想说?

     

撕你妹啊

十月 17, 2017 在 10:30 上午

纯粹是为了撕逼而写,虽然有干货,写的模棱两可,也是够了。

    Chris Yue

    十月 17, 2017 在 10:58 上午

    你好你妹,你觉得我是在撕谁呢?

     

whidy

十月 17, 2017 在 9:03 上午

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

    Chris Yue

    十月 17, 2017 在 9:43 上午

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

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

     

x

十月 16, 2017 在 4:38 下午

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

    Chris Yue

    十月 16, 2017 在 6:20 下午

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

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

    从两个方面来说:

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

发表评论

one + four =