前端移动端布局有哪些好的方案？

[yantianqi]

移动端响应式布局有哪些好的处理方案，rem?

[Hasel]

rem+vh+media query

[6j1A6v70lEv5n2U2]

用过 px2rem 感觉不错

[Torpedo]

直接布局吧。rem 还是有缺点的

[yagokoro]

viewport + flex/grid，真的没必要用 rem 搞一层

[nwu2Cv8OZ2MZMg39]

vw/vh + media query

[meteor957]

media query + rem

[learnshare]

**坚决反对 px2rem**，以及任何包含 *缩放* 或 *重新计算* 的方案，不精确的值会带来很多麻烦。

建议仅在文本相关的部分属性中使用 em/rem，列举如下：

+ font-size
+ line-height
+ letter-spacing
+ word-spacing

其他使用 px，极少数场景下可以使用 vh/vw。

----

移动端布局和 PC 端并没有太多差异，有一些细节需要注意：

+ 禁止缩放 `<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">`，使页面以实际显示分辨率显示
+ 由于设备距离人眼更近，需要更慎重的选择文字相关尺寸
+ （可能）需要适配触摸操作
+ 需要慎重考虑可交互元素（如按钮）的尺寸

可以参考 https://material.io/design/ 及 https://getbootstrap.com/ 学习成熟的设计和实现方案。

欢迎讨论 :)

[lk920724]

vh vw
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {

}

[zqx]

em rem 适用于文字吧，主要作用是在不同尺寸屏幕上显示文字比例更友好，块级元素很少用到(我用 px, vw)

[zqx]

media 也不常用了，现在做的一个 hybird h5 是直接写 max-width: 420px，不管具体机型

[morethansean]

media query 吧这年头别用 rem 了...

[kaka1]

@zqx 那大屏幕怎么办

[gaoryrt]

如果只考虑移动端的话，rem 应该是非常方便的