这是一个创建于 2306 天前的主题，其中的信息可能已经有所发展或是发生改变。
移动端响应式布局有哪些好的处理方案，rem?
 | 1 Hasel 2019-07-19 17:50:52 +08:00 rem+vh+media query |
 | 2 6j1A6v70lEv5n2U2 2019-07-19 19:42:40 +08:00 via iPhone 用过 px2rem 感觉不错 |
 | 3 Torpedo 2019-07-19 19:59:47 +08:00 直接布局吧。rem 还是有缺点的 |
 | 4 yagokoro 2019-07-19 20:02:46 +08:00 via Android viewport + flex/grid，真的没必要用 rem 搞一层 |
 | 5 nwu2Cv8OZ2MZMg39 2019-07-19 20:07:47 +08:00 vw/vh + media query |
 | 6 meteor957 2019-07-19 20:13:46 +08:00 media query + rem |
 | 7 learnshare 2019-07-19 20:24:32 +08:00  2 **坚决反对 px2rem**，以及任何包含 *缩放* 或 *重新计算* 的方案，不精确的值会带来很多麻烦。 建议仅在文本相关的部分属性中使用 em/em，列举如下： + 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/ 学习成熟的设计和实现方案。 欢迎讨论 :) |
 | 8 lk920724 2019-07-19 20:32:59 +08:00 vh vw @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { } |
 | 9 zqx 2019-07-19 20:50:27 +08:00 via Android em rem 适用于文字吧，主要作用是在不同尺寸屏幕上显示文字比例更友好，块级元素很少用到(我用 px, vw) |
| 10 zqx 2019-07-19 20:52:08 +08:00 via Android media 也不常用了，现在做的一个 hybird h5 是直接写 max-width: 420px，不管具体机型 |
 | 11 morethansean 2019-07-19 21:23:40 +08:00 media query 吧这年头别用 rem 了... |
 | 13 gaoryrt 2019-07-20 18:43:29 +08:00 如果只考虑移动端的话，rem 应该是非常方便的 |
Select Language