不建议移动端网页使用rem单位布局

关于rem

REM（font size of the root element），是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

使用rem布局实质上是将网页视图等比放大缩小，也就是说，不管你使用多大的屏幕，你看到的内容范围都是一样的，这与用户体验是违背的，用户使用平板看网页，并不是要看网页的放大版，而是想看到更多的内容，如下截图：

小屏手机：

ipad：

大屏幕应该看到更多的内容才对，就像玩游戏时，屏幕大，视野应该更大，而不是人物、环境都跟着变大。

在手机上一屏只能显示4个块内容，在ipad的上可以展示更多，这才是移动端网页正确的做法。rem可以说是设计师与前端开发的偷懒行为，所以我还是依然推荐采用px单位，而且现在浏览器对flex，grid布局方案的支持已经很完善，可以很轻松的进行排版，如果一定要考虑低版本浏览器，那就采用流式布局。有些需求需要实现宽高等比缩放，那我们也可以采用vw、vh方案更方便的实现，而不是rem，rem方案是viewport单位（vw、vh）的备胎，因为前几年viewport单位的兼容性太差，viewport单位和rem都是根据屏幕尺寸等比缩放，微信小程序的rpx也是。如今，手淘的flexible.js也早已停止维护，但还是会出现很多人再继续使用flexible.js的方案。

flexible.js 仓库地址：https://github.com/amfe/lib-flexible

rem 布局只是某个时期在某些特定环境下的产物而已。最终的主流还是弹性布局及响应式布局。

网页是要放在大小，比例，像素密度不同的显示屏上看的，就绝对不可能是“和设计图完全一样的”，这是一个错误的目标，去看各大ui框架可以发现，大家都是清一色的px+少许em单位。

如果一定要做等比缩放，那放弃rem直接使用vw、vh吧。