前端大佬们，移动端布局不用 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 的。响应式设计老生常谈了，但国内一般就是放大就所谓的适配，设计师也接受

[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 级别的百分比

[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,媒体查询，这些配合起来怎么都能解决问题...但就是不知道有没有系统性得实践方案..实际项目中看到得大都乱得很