如何区分响应式设计与自适应设计？

探讨响应式布局的创建方法及与自适应设计的区别，涵盖视口设置、流体布局和媒体查询的应用。

响应式设计 中等 CSS 响应式布局 媒体查询

创建响应式布局的核心是通过技术手段使网页能自动适应不同设备尺寸。以下是具体实现方法：

  1. 设置视口 meta 标签
    在 HTML 的 <head> 中添加： 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    确保页面宽度跟随设备宽度缩放，禁止手动缩放可添加 user-scalable=no。

  2. 使用流体布局（Fluid Layout）
    • 相对单位：宽度用百分比、vw/vh 等相对单位，而非固定像素（例如 width: 80%;）。
    • 弹性盒子（Flexbox）与网格布局（Grid）： 
      .container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

      自动调整子元素排列。

  3. 媒体查询（Media Queries）
    通过 CSS 媒体查询为不同屏幕尺寸应用样式： 
    /* 手机优先：最小宽度递增 */
@media (min-width: 768px) { /* 平板 */ }
@media (min-width: 992px) { /* 桌面 */ }

/* PC 优先：最大宽度递减 */
@media (max-width: 767px) { /* 手机 */ }

    常用断点：手机（<768px）、平板（≥768px）、桌面（≥992px）。

  4. 响应式图片与资源
    使用 max-width: 100% 防止图片溢出： 
    img {
  max-width: 100%;
  height: auto;
}

    结合 srcset 属性根据分辨率切换图片源。

响应式设计与自适应设计的区别

特性 响应式设计 (Responsive) 自适应设计 (Adaptive)
实现原理 一套代码 + CSS 动态调整布局（如媒体查询） 多套独立代码，服务端返回不同版本页面
布局方式 流体布局，元素尺寸根据视口自动伸缩 固定布局，基于设备预定义尺寸（如 320px, 768px）
维护成本 低（仅维护一套代码） 高（需更新多套界面）
断点处理 连续无级调整 阶梯式跳转（特定屏幕尺寸切换布局）
内容适配 可基于视口动态增删/重组内容 设备类型绑定特定布局，内容调整灵活性低
典型技术 CSS Flexbox/Grid、媒体查询 服务端 UA 检测 (如 JavaScript 或后端处理)

关键差异总结：

  • 响应式设计依赖 CSS 动态响应视口变化（一套代码），适合复杂布局的自适应。
  • 自适应设计为不同设备开发独立版本（多套代码），适合对特定设备精细控制。