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

东明兄 2021-04-21
0条评论 1,197 次浏览
东明兄 2021-04-210条评论 1,197 次浏览
关于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吧。

发表评论

您的电子邮箱地址不会被公开。