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

[firhome]

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

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

[unco020511]

没有一劳永逸的适配方案,不同需求不同方案

[Cbdy]

这篇文章关于 rem 的观点说得很对

[iPhone9]

是他不会用

[TimPeake]

`2021 年 React 项目推荐的和应该放弃的技术方案` 看到这个标题 ，还没翻到下面，大概就猜出来了这篇文章有多么沙雕。
--------------------------------------------------
正经话： 现在主流的移动端适配都是 vw 了。大概就是 4 楼的方案

[zedcoding]

推荐 pxtovw 吧

[Obrigado0815]

我用 vw ；
有个专门的库，浏览器预览时，会帮忙把 css 代码中的 px 自动转换成 vw ；

[anguiao]

@3dwelcome 他没有说不用 rem，而是说不要用“修改根字体大小+rem”的方式，来实现所谓的响应式布局。

[murmur]

@Huelse 这就是功能越简单适配越容易的例子，他的主站就一个功能：宣传产品，卖掉产品，只需要看，不需要什么交互

当然问题也有，随意的适配就没有什么思考，比如 support 功能，正常情况下，右侧的导航是浮动的，你可以很容易的找到你要的类目，比如 getting started

等切换到手机，侧栏被放置在页面最底下，也就是说为了导航我要看一堆不是我需要的东西

[gdrk]

现在常用的就是 4 楼的方案，rem 只是当时移动端浏览器对 vw/vh 支持度太差的 hack 手段啊。时代再进步，站在现在喷以前的技术方案挺无聊的

[anguiao]

用“修改根字体大小+rem”的方式来做自适应，只能说是一种凑合的方案。
这样出来的效果，就是大屏手机和小屏手机显示的内容是一样多的（忽略屏幕比例的前提下），大屏手机的字很大，小屏手机的字很小，用户体验怎么也不能算好。
至于用 vm/vh，我认为和用“修改根字体大小+rem”没有本质区别，都是在“凑合”。

[magichacker]

@wenzichel 头像是本人吗？

[maplerecall]

@firhome @zzwyh 指的是在设置 viewport 为 device-width 时使用 px，这种情况下一个 px 的实际物理大小是设备厂商期望用户看到的尺寸，比如一个 dpr 是 2 的高清屏幕设备在这种情况下 1px 的实际物理像素是 2，所以在用户看起来和在低分辨率同尺寸屏幕上所占的空间是相近甚至相同的，不会出现过小或者过大的问题。

这种方法内容可以做到真正的内容自适应，比如 iPhone X 一行能比 iPhone 5 显示更多的内容，但同一个字的物理尺寸是相近甚至相同的，不会造成阅读困难。其实大多数 Native app 也是这种适配方式。

[ciming]

我看起点的移动端是这样处理的
html {
background-color: #fff;
font-size: 16px;
font-size: calc(100% + 2 * (100vw - 360px) / 39);
font-size: calc(16px + 2 * (100vw - 360px) / 39);
line-height: 1.5
}
@media screen and (min-width: 414px) {
html {
font-size:calc(112.5% + 4 * (100vw - 414px) / 586);
font-size: calc(18px + 4 * (100vw - 414px) / 586)
}
}

@media screen and (min-width: 750px) {
html {
font-size:calc(137.5% + 6 * (100vw - 1000px) / 1000);
font-size: calc(22px + 6 * (100vw - 1000px) / 1000)
}
}

[beilo]

@maplerecall 大佬有对应的资料嘛? 想学习下

[lupkcd]

px2vw 就行了 rem 可以放弃了

[wednesdayco]

移动端布局：
1·device-width 设定为固定值 老掉牙但最好使
2·rem/em 这个两三年前流行
3·vw/vh 小数点问题比较严重还是
4·百分比布局 这种一般不会去对文本做
5·@media 这个一般结合以上的使用，毕竟每个宽度写一套要死人的

欢迎大佬补充

[Torpedo]

客户端里的页面不要用 rem，原因很简单：你的客户端基本可以确定不是按照 rem 的缩放模式来做的。你用了 rem，和客户端差异就会很大

[faceRollingKB]

实践中发现 rem 单位用处不大，使用 px 单位再加上 media 就可以同时适配不同尺寸的页面，当然设计也要根据页面尺寸来

[zephyru]

虽然都感觉 rem 不好，但我也基本没见到，系统性讲非 rem 布局的屏幕适配方案，虽然 flex，gird，vw /vh,媒体查询，这些配合起来怎么都能解决问题...但就是不知道有没有系统性得实践方案..实际项目中看到得大都乱得很