响应式/自适应布局

响应式/自适应布局

理解响应式与自适应布局

• 响应式布局（RWD）：页面根据设备尺寸（如屏幕宽度）动态调整布局，通常使用相对单位（如%、vw、rem）和媒体查询。
• 自适应布局：为不同设备提供固定布局（如PC/移动端两套模板），切换时适应设备类型。
• 区别：响应式是“流式”调整，自适应是“分段”切换。

需要掌握的知识点

• 响应式布局：
  • 相对单位：%、vw/vh、rem/em、fr（Grid）。
  • 媒体查询：@media (max-width: 768px) { ... }。
  • Flexbox/Grid：结合minmax、auto-fit实现动态布局。
  • 图片优化：使用<picture>或srcset加载适配尺寸的图片。
• 自适应布局：
  • 检测设备类型（CSS媒体查询或JS判断）。
  • 提供不同样式表或模板（如PC版/移动版）。
• 常见场景：
  • 响应式：导航栏在小屏幕折叠为汉堡菜单。
  • 自适应：移动端加载简版布局，PC端加载复杂布局。
• 工具与技术：
  • Viewport：<meta name="viewport" content="width=device-width, initial-scale=1">。
  • CSS框架：了解Bootstrap/Tailwind的响应式类（如col-md-6）。
  • 调试：用DevTools的设备模式测试不同屏幕尺寸。
• 面试问题：
  • Q：如何实现移动端导航折叠？
    A：用媒体查询检测宽度，结合Flexbox调整布局，JS切换显示状态。
  • Q：响应式和自适应的优缺点？
    A：响应式开发成本高但体验流畅，自适应开发简单但维护多套代码。