什么是 Web 自适应设计？

定义

Web 自适应设计（Adaptive Web Design, 简称 AWD）是一种网站设计方法，旨在使网站在不同设备（如手机、平板、电脑）上呈现出 良好的用户体验。它通过侦测用户设备的屏幕大小、分辨率、系统环境，按需加载合适的布局和资源，使页面内容看起来始终合理、可用、可读。

特点

• 分设备布局：针对常见的断点（如 320px, 768px, 1024px 等）进行设计。
• 静态断点：页面在这些断点之间一般不会调整，适配的是某几个固定尺寸。
• 加载多个版本：可能根据设备加载不同的 HTML/CSS 结构或资源。

示例对比

响应式设计（Responsive）	自适应设计（Adaptive）
单一页面适应各种屏幕	为不同屏幕准备多个版本
使用 CSS 媒体查询调整布局	检测设备并加载不同布局版本
更流畅，适合未知设备尺寸	更快加载，适合已知设备尺寸

---

简单示意图（演讲可用图解）

            +--------------+
            |  PC Layout   | <== 1024px 以上
            +--------------+

            +--------------+
            | Tablet Layout| <== 768px ~ 1023px
            +--------------+

            +--------------+
            | Mobile Layout| <== 小于 768px
            +--------------+

---

一句话总结

Web 自适应设计就是为不同设备“量体裁衣”，提前准备好最合适的版本，从而提供最佳的浏览体验。