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

记得我几天前写了一篇博客说面试了一哥们儿大谈特谈利用 rem 做手机适配，其实在部门内部，rem 用来做手机适配也有很大部分簇拥者。我是一个比较纯粹的工程师，所以不太喜欢这个方案，『纯粹』的意思是指，我不爱用 hack 的方式，来实现某些目的或者效果。hack 是指利用一些『本来是用来实现 A 的功能，却用貌似看起来巧妙的方式实现了 B』。不爱是因为，以我的经验，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 这个单位应该还不如现在支持度那么高，另外这些人都不会觉得 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 吧？

@function pxToVw($px, $screen-width: 750) { 
  @return ($px / $screen-width) * 100vw;
}

wx pay

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

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

匿名人士 2017年10月17日上午11:58
vm是大趋势啊，现在就是看兼容要求了。

回复 ↓
1. Chris Yue 文章作者2017年10月17日下午12:29
  老大，是 vw。另外兼容性你试试不就知道了。
小白 2017年10月17日上午11:42
就算设计图用了vw，那么高度呢，vh？

回复 ↓
1. Chris Yue 文章作者2017年10月17日下午12:11
  你提 vh 是想说？
撕你妹啊 2017年10月17日上午10:30
纯粹是为了撕逼而写，虽然有干货，写的模棱两可，也是够了。

回复 ↓
1. Chris Yue 文章作者2017年10月17日上午10:58
  你好你妹，你觉得我是在撕谁呢？
whidy 2017年10月17日上午9:03
我觉得提出这个思路和质疑是好的。不过我觉得有点偏激。理想很骨感现实很残酷。至少在当下环境个人觉得rem还是最佳方案。

回复 ↓
1. Chris Yue 文章作者2017年10月17日上午9:43
  其实当前的环境是，懒于独立思考和实践，对『权威』的盲目崇拜，是普遍现象，那叫『集体』偏激，我想通过『不要再……』系列文章对一些不再适用的『金科玉律』提出质疑，给集体偏激降降温。
  
  至于你说的当前环境下 rem 还依然最佳，不妨说出你的理由？我不知道你是不是指兼容性问题，如果是我不知道你有没有数据支撑，至少我让测试的部门所有手机，vw 支持度接近 100%，而且那是在好几个月前就做过的测试，caniuse 上也显示移动端对 vw 的支持度已经很高了。
x 2017年10月16日下午4:38
其实rem这个东西的出现是为了让前端能完美还原设计稿。因为美工设计的时候，单位用的是像素，而前端想在不同屏幕上完全还原设计稿，就必须要有一套换算过程。诚然，如果美工在给图的时候不是标的像素而是百分比，那么直接用vh，vw都是可以的，但是实际情况下，他们只会标出像素，如果你自己去换成百分比，那又会花费大量的时间，而且算出来的百分比也会对还原图有一定的误差。

回复 ↓
1. Chris Yue 文章作者2017年10月16日下午6:20
  就喜欢你这种能说出具体理由的。
  
  rem 的确可以定义成自己觉得方便的宽度，不过综合考虑引入这种方式的带来的优缺点，我还是觉得不划算。
  
  从两个方面来说：
  1. rem 完全成了布局用的单位，而失去了此单位本来的意义，但它本来的意义是我可能本来就要用到的
  2. 我相信现在的前端工具是一定可以很方便的从 px 转换到 vw（使用 sass 自定义函数），或者用 calc 函数也行，虽然现在支持度还待观望