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

[firhome]

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

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

[murmur]

没有自适应，不适应，用一些相对布局，能拉开就行

强制做自适应的结果，就是小米主站的横屏手机显示，直接 chrome 选调试工具转一下屏就可以看到效果了

[emonc]

可以用 vw/vh
关于这个文章，考虑到 V 站不能说脏话我就不予置评了

[kop1989]

实用层面上的自适应无非就是宽度匹配。

真正需要横屏、pad 使用的时候，考虑到内容密度的问题，你靠宽度匹配也不合适了。
需要重新规划布局，重新渲染。

[wenzichel]

我们现在用的是 vw 和 /vh，配合着 webpack 的插件 postcss-px-to-viewport，可以将源码中的 px 转为 vw 单位。

require('postcss-px-to-viewport')({
viewportWidth: viewportWidth || 750, // 设计稿的宽度
unitPrecision: 3, // 单位精度，即保留几位小数
viewportUnit: 'vw' // 转换后的单位
}),

[mxT52CRuqR6o5]

@emonc 把别人带坑里去，自己水平就变相提高了

[dagouziwangwang]

emmm 文章里说 “FaceBook 使用 Tailwind CSS 重构后，节省了接近 70%的 css 代码，威力惊人”，好奇 className 多了多少

[Vegetable]

移动端我的体会是，如果不考虑横屏，vw/vh 很好用。引入横屏会麻烦一点。

这个文章早就看过了，一言难尽...

[qaqLjj]

vw 啊

[murmur]

无论 vw，vh 都有个单位，最忌讳的是设计一个全局变量，妄图通过修改这个变量适配各种屏幕尺寸，而且国产手机的 rom 各种魔改，你不知道在 ui 设定缩放的时候会出现什么奇葩问题

你看各家，有几个适配的，都是选一个最小尺寸，比如横排最小只能 4 个按钮，那更宽就加大间距，竖排因为可以滚动所以几乎必须要考虑，真遇到横屏，两边留白

遇到需要大字体的时候，基本没几个管的，微信是有内置字体调整，其余的你只能祈祷有老年人模式

除非你是对横屏非常依赖的东西，比如视频、游戏、文档编辑预览等

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

至于折叠屏，你看有几家适配，当然折叠屏也不需要适配，这么大屏幕都可以显示电脑版了

[murmur]

更正：必须要=》没有必要

[Dukewill]

小白请教下，vw/vh 跟直接用 % 有啥区别

[learnshare]

em/rem 仅推荐应用在文本相关的属性中，如：
font-size/line-height/text-indent/word-spacing/letter-spacing/text-shadow 等

禁止在布局相关的属性中使用，如：
width/height/margin/padding 等

根据 root.font-size(rem) 调整布局或整体缩放是错误的做法
px2rem 更是纯粹的自讨苦吃

（小程序 750rpx 也是这种方式，开发 /设计省事了，pixel perfect 没了，更大的屏幕没法适配）

[ericls]

@Dukewill percent 都是爸爸的宽度

[yl20181003]

@Dukewill #11 百分比是相对父元素的吧，vw/vh 相对视窗大小

[KuroNekoFan]

自适应和相对长度单位是两个问题，自适应应该理解为针对不同特性的设备有不同的 layout
另外，相对长度单位也没必要用 rem，直接上 vw 即可，配合蓝湖的自定义屏幕宽度很方便

[learnshare]

总结来说，**缩放** 是 **适配（响应式）** 手段中最不该选择的方式之一

[kensoz]

似乎现在 vw/vh 是主流？我这现在还在用 rem

[kuxuan]

各位大佬，有用 vw/vh 做的示例吗，给个看看。

[wunonglin]

自适应 !== 缩放

[CodingNaux]

设计师偷懒只设计移动端界面，然后说适配 ipad，单纯放大，所谓的适应是这种吗？
这种没啥意思。

可以看看 bootstrap 怎么用 rem 的。响应式设计老生常谈了，但国内一般就是放大就所谓的适配，设计师也接受