移动端适配方案

快问快答

响应式布局有几种方式

我觉得很多情况下要多种方案一起用，很多情况下时互补的，媒体查询是必要的

1.媒体查询 2.百分比 3.rem 4.vw/vh

适配方案对比

viewport 缩放方案
- 适配原理简单
- 需要使用 JS
- 直接使用设计稿标注无需换算
- 方案死板只能实现页面级别整体缩放
动态 REM 方案
- 是撇原理稍复杂
- 需要使用 JS
- 设计稿标注换算到 CSS 的 rem 计算简单
- 方案灵活技能实现整体缩放又能实现
vw 方案
- 适配原理简单
- 不需要 JS 即可适配
- 设计稿标注的 px 换算到 CSS 的 vw 计算复杂
- 方案灵活技能实现整体缩放又能实现局部不缩放

参考资料