移动端适配方案

快问快答

响应式布局有几种方式

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

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

适配方案对比

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

参考资料

Last Updated:
Contributors: johan