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

其中说到 rem 布局，有点疑惑。如果不用 rem 应该如何做自适应？
rem 布局 疑惑 大佬27 条回复 • 2021-06-25 13:02:52 +08:00
murmur 1
murmur 2 小时 28 分钟前 ❤️ 1
没有自适应，不适应，用一些相对布局，能拉开就行

强制做自适应的结果，就是小米主站的横屏手机显示，直接 chrome 选调试工具转一下屏就可以看到效果了
emonc 2
emonc 2 小时 27 分钟前
可以用 vw/vh
关于这个文章，考虑到 V 站不能说脏话我就不予置评了
kop1989 3
kop1989 2 小时 25 分钟前
实用层面上的自适应无非就是宽度匹配。

真正需要横屏、pad 使用的时候，考虑到内容密度的问题，你靠宽度匹配也不合适了。
需要重新规划布局，重新渲染。
wenzichel 4
wenzichel 2 小时 23 分钟前 ❤️ 1
我们现在用的是 vw 和 /vh，配合着 webpack 的插件 postcss-px-to-viewport，可以将源码中的 px 转为 vw 单位。

require(‘postcss-px-to-viewport’)({
viewportWidth: viewportWidth || 750, // 设计稿的宽度
unitPrecision: 3, // 单位精度，即保留几位小数
viewportUnit: ‘vw’ // 转换后的单位
}),
mxT52CRuqR6o5 5
mxT52CRuqR6o5 2 小时 15 分钟前 ❤️ 2
@emonc 把别人带坑里去，自己水平就变相提高了
dagouziwangwang 6
dagouziwangwang 2 小时 8 分钟前
emmm 文章里说 “FaceBook 使用 Tailwind CSS 重构后，节省了接近 70%的 css 代码，威力惊人”，好奇 className 多了多少
Vegetable 7
Vegetable 2 小时 8 分钟前
移动端我的体会是，如果不考虑横屏，vw/vh 很好用。引入横屏会麻烦一点。

这个文章早就看过了，一言难尽…
qaqLjj 8
qaqLjj 2 小时 3 分钟前 via Android
vw 啊
murmur 9
murmur 1 小时 51 分钟前
无论 vw，vh 都有个单位，*忌讳的是设计一个全局变量，妄图通过修改这个变量适配各种屏幕尺寸，而且国产手机的 rom 各种魔改，你不知道在 ui 设定缩放的时候会出现什么奇葩问题

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

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

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

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

至于折叠屏，你看有几家适配，当然折叠屏也不需要适配，这么大屏幕都可以显示电脑版了
murmur 10
murmur 1 小时 51 分钟前
更正：必须要=》没有必要

Dukewill 11
Dukewill 1 小时 48 分钟前
小白请教下，vw/vh 跟直接用 % 有啥区别
learnshare 12
learnshare 1 小时 47 分钟前
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 13
ericls 1 小时 45 分钟前 via iPhone
@Dukewill percent 都是爸爸的宽度
yl20181003 14
yl20181003 1 小时 44 分钟前
@Dukewill #11 百分比是相对父元素的吧，vw/vh 相对视窗大小
KuroNekoFan 15
KuroNekoFan 1 小时 42 分钟前
自适应和相对长度单位是两个问题，自适应应该理解为针对不同特性的设备有不同的 layout
另外，相对长度单位也没必要用 rem，直接上 vw 即可，配合蓝湖的自定义屏幕宽度很方便
learnshare 16
learnshare 1 小时 41 分钟前
总结来说，**缩放** 是 **适配（响应式）** 手段中*不该选择的方式之一
kensoz 17
kensoz 1 小时 39 分钟前
似乎现在 vw/vh 是主流？我这现在还在用 rem
kuxuan 18
kuxuan 1 小时 37 分钟前 via iPhone
各位大佬，有用 vw/vh 做的示例吗，给个看看。
wunonglin 19
wunonglin 1 小时 31 分钟前 ❤️ 1
自适应 !== 缩放
CodingNaux 20
CodingNaux 1 小时 21 分钟前
设计师偷懒只设计移动端界面，然后说适配 ipad，单纯放大，所谓的适应是这种吗？
这种没啥意思。

可以看看 bootstrap 怎么用 rem 的。响应式设计老生常谈了，但国内一般就是放大就所谓的适配，设计师也接受
tinkerer 21
tinkerer 1 小时 4 分钟前
@mxT52CRuqR6o5 哈哈哈哈哈哈，你这个观点的角度很不错
3dwelcome 22
3dwelcome 46 分钟前
这文章本身就是矛盾的。

作者推荐用 Tailwind CSS，可里面 REM 满天飞，我还在 V2 发过贴，专门吐槽过这点。
3dwelcome 23
3dwelcome 42 分钟前
@murmur “想做自适应，除非你页面简单到一行字一张图，稍微复杂一点需要排版就容易崩”

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

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

至于美不美观另说。
molvqingtai 24
molvqingtai 29 分钟前 via Android
手写的时候 vw/vm rem 配合着用，现在嘛，当然是 taiwindcss 啦
IvanLi127 25
IvanLi127 27 分钟前 via Android
目前看 大部分用 rem 搞自适应的，都是叫缩放，惨不忍睹。
otakustay 26
otakustay 18 分钟前
这问题你研究再深也无解的，它的根源是设计给的是什么，是响应式还是所有设备长一个样。设计要所有设备一个样，那实现上 rem 就是*佳的，归根到底设计水平太差
lrabbit 27
lrabbit 4 分钟前
@kuxuan https://www.lrabbit.life,基本只有 vw/vh