前端大佬们，移动端布局不用 REM 用什么？

[firhome]

刚才看到这个文章 https://zhuanlan.zhihu.com/p/378619948

其中说到 rem 布局，有点疑惑。如果不用 rem 应该如何做自适应？

[tinkerer]

@mxT52CRuqR6o5 哈哈哈哈哈哈，你这个观点的角度很不错

[3dwelcome]

这文章本身就是矛盾的。

作者推荐用 Tailwind CSS，可里面 REM 满天飞，我还在 V2 发过贴，专门吐槽过这点。

[3dwelcome]

@murmur “想做自适应，除非你页面简单到一行字一张图，稍微复杂一点需要排版就容易崩”

只要不是随心所欲手写 span 外套 div，严格按照布局规范来做(FLEX/GRID/BOOTSTRAP)，感觉要崩也难。

我现在复杂布局，都是用代码根据设计稿自动生成，最少保证自适应在视觉上的一致性。

至于美不美观另说。

[molvqingtai]

手写的时候 vw/vm rem 配合着用，现在嘛，当然是 taiwindcss 啦

[IvanLi127]

目前看 大部分用 rem 搞自适应的，都是叫缩放，惨不忍睹。

[otakustay]

这问题你研究再深也无解的，它的根源是设计给的是什么，是响应式还是所有设备长一个样。设计要所有设备一个样，那实现上 rem 就是最佳的，归根到底设计水平太差

[lrabbit]

@kuxuan https://www.lrabbit.life,基本只有 vw/vh

[codehz]

响应式布局和 vw 这种相对比例布局都有各自的缺陷，可以说是两个极端
能做的话当然是响应式好，但是它的缺陷在于媒体查询是基于视口大小的，复杂布局使用起来就需要各种数学计算，还很难调试
如果有一个基于容器大小的查询，响应式就会好做很多
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
（还在草案阶段）

[maplerecall]

rem 是早期移动端兼容性不好加上产品、设计、开发缺少经验，强行要求 1：1 缩放设计稿导致的一种歪的路子，很不优雅，而且有无法解决的子像素 bug 。想要各设备统一直接 meta 里 viewport 宽度等于设计稿宽度就行了，这样所有东西的像素尺寸都和设计稿是完全一致的，整洁优雅，对于那种花里胡哨的专题、营销页效果拔群。

顺带吐槽：
rem 在国内被这么广泛使用很大一部分原因是因为当时阿里早期用了，加上各种复制粘贴的灌水技术文导致很多人盲从。很早之前面试人，大多数移动端布局除了 rem 八股文之外一问三不知…… 几年前做一个新项目时我就说服设计做宽度自适应，然后完全用 px 布局，开发很舒服而且效果很好，结果后来被空降来的前端领导质疑，我就直接把整个移动端布局原理给整个团队普及了一下，然后他又说阿里都用 rem，这么大的公司做背书，你为啥自己搞一套，我就去找了一通，google，微软、facebook，甚至阿里自己新一些的天猫都用的 px，才给怼回去了……到头来得靠这种方法说服，现在想起来真是有些唏嘘。

[DualWield]

@otakustay 我用 vw 不是达成一样的效果吗？

[yhxx]

这篇文章。。。一言难尽

至于布局，可以参考下这个
https://github.com/amfe/article/issues/17

[firhome]

@maplerecall 感谢回复，宽度自适应我能理解，但是其它完全用 px 布局，指的是哪些地方用 px 呢？如果在高清的屏幕小岂不是显得很小？

[thulof]

打扰了，在某大厂，啥 rem 、vh/vw 也没用，一直用的是 px，PC/移动端是两套完全不同的交互

[anjianshi]

真的，这个文章，还有作者在下面的回复，什么狗屁啊！

[anjianshi]

@Vegetable 考虑横屏可以试试 vmin/vmax ？

[codehz]

@firhome 理论上 px 是会考虑 dpi 的（也就是不等于物理像素），所以唯一的问题在于你期望它在不同屏幕上时需要的布局（比如手机屏幕太小，用 pc 的布局方案就会超出屏幕）

[zzwyh]

@maplerecall px 的布局是指在哪方面呢？这个地方有点迷糊

[Huelse]

说起来这也是前端的一个痛点，还是看看国外大厂怎么做的吧,例如 https://stripe.com/

[wanguorui123]

我一般 px*2

[KouShuiYu]

@Dukewill 相当于 root 级别的百分比