做响应式网站是不是都用rem

本文关键词：做响应式网站是不是都用rem

干这行十五年了，说实话，现在还在纠结“做响应式网站是不是都用rem”这个问题的人，要么是真小白，要么就是被某些培训机构给忽悠瘸了。我见过太多刚入行的小兄弟，拿着尺子去量设计稿，然后疯狂换算rem，结果上线后字体忽大忽小，手机端看着跟鬼画符似的，客户骂娘，自己还得熬夜改bug，那滋味真不好受。

咱们先说结论：不是必须，也不是最好。甚至可以说，对于很多中小型企业官网来说，死磕rem反而是给自己挖坑。

回想十年前，那时候移动端还没现在这么普及，iPhone 4的屏幕分辨率才960x640，那时候用rem确实是个好办法，配合viewport缩放，能解决不少适配问题。但现在的手机屏幕五花八门，从5英寸到7英寸，从1080P到4K，还有各种刘海屏、挖孔屏，你算得过来吗？我去年接了个单子，客户非要我全用rem写，说是为了“极致适配”。我跟他讲，用vw/vh配合clamp()函数，或者直接用flex布局加百分比，效果一样好，还不用算那个烦人的基准值。他不听，最后上线后，在某个小众品牌的折叠屏手机上，导航栏直接错位，修了一周才搞定。那种痛苦，谁懂？

很多人觉得rem高大上，显得专业。其实吧，真没必要。你看现在那些大厂的主流项目，尤其是后台管理系统或者简单的展示型网站，用的最多的还是px转vw，或者是直接写百分比。rem最大的痛点是什么？是继承。你父元素字体设了16px，子元素设1rem就是16px，但如果中间夹了个组件，字体设了14px，那这一层的1rem就变成了14px。这种隐式的继承关系，一旦项目大了，调试起来能把你逼疯。我有个徒弟，就是被这个坑害惨了，最后不得不重写，累得半死。

当然，我也不是说rem一无是处。如果你做的是那种对字体排版要求极高的H5活动页，或者是一些需要严格遵循设计稿比例的页面，rem确实好用。特别是配合postcss这样的自动化工具，把px自动转成rem，那体验确实不错。但是，这前提是你得懂自动化，得配环境，对于小团队或者个人开发者来说，成本有点高。

再说说vw。我觉得vw才是响应式的未来。它直接基于视口宽度，不用管根字体大小，简单粗暴有效。比如你想让一个盒子占屏幕宽度的50%，直接写width: 50vw;完事。不用算来算去，不用管继承。虽然vw在字体大小上有点小毛病，比如最小字号限制，但现在有clamp()函数来救场，基本没啥大问题了。

所以，回到最初的问题，做响应式网站是不是都用rem？我的回答是：看情况。如果是大型项目，有完善的技术栈和自动化流程，用rem没问题。如果是小项目，追求效率，用vw或者flex+百分比更香。别为了用而用，别为了显得专业而用。代码是给人看的，也是给机器跑的，能解决问题，跑得顺畅，才是好代码。

我见过太多人为了炫技，搞一堆复杂的媒体查询，结果兼容性差得一塌糊涂。其实，响应式的核心是“流动”，是让内容适应容器，而不是让容器去适应内容。记住这一点，你就不会在rem的坑里越陷越深。

最后唠叨一句，别太迷信某种技术。技术是死的，人是活的。多试试不同的方案，多看看实际效果，比在这里纠结强得多。毕竟，客户买单的是效果，不是你的代码用了什么单位。