移动端适配方案

快问快答

响应式布局有几种方式

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

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

适配方案对比

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

参考资料

• 一篇搞定移动端适配
• 大厂是怎么做移动端适配的
• 移动端适配原理篇
• 可伸缩布局方案 amfe-flexible 解决多端适配问题
• 移动 web 最佳实践
• 面试官：你了解过移动端适配吗？