响应式网页设计是一种建站方式：同一个页面会根据打开它的屏幕调整布局，从小屏手机到宽屏显示器都能正常浏览。响应式网站不再分别维护移动版和桌面版，而是用弹性布局、弹性图片和 CSS 媒体查询，把同一份内容按不同屏幕尺寸重新排列。如今这已经是建站的默认做法，也是 Google 推荐的方式。
响应式网页设计的由来
这个术语由设计师 Ethan Marcotte 提出，出自他 2010 年 5 月发表在 A List Apart 上的文章《Responsive Web Design》。那时 iPhone 才问世三年，很多公司在主站之外另做一个“m.”开头的移动站。Marcotte 主张只做一个能根据设备作出响应的网站，并提出三个要素：
- 流式网格：布局宽度使用相对单位（百分比），而不是固定像素。
- 弹性图片：图片在容器内随之缩放。
- 媒体查询：只有当屏幕满足某个条件（例如最小宽度）时才生效的 CSS 规则。
此后 CSS 工具进步了很多，但这三点至今仍能概括响应式网站的工作方式。
核心原则
内容重新排列，而不是消失
响应式页面在所有设备上展示相同的内容，只是排列方式不同。桌面端的三栏布局在手机上变成一栏，横向菜单收进一个菜单按钮，大表格在自己的区域内横向滚动。在移动端隐藏重要内容是常见错误，何况 Google 索引的是页面的移动版本。
断点之间布局平滑伸缩
布局随屏幕宽度平滑伸缩，只在少数几个称为断点的宽度上改变结构。断点怎么选是一个单独的话题，参见响应式断点。
移动优先
现在大多数响应式网站采用移动优先的做法：基础 CSS 写的是手机布局，再用媒体查询为更大的屏幕增加内容和样式。这样通常 CSS 更简洁，手机页面也更快。详见移动优先设计。
触控和屏幕像素密度也属于响应式
响应式设计不只关乎宽度。手机靠手指操作，屏幕像素密度高，还会在竖屏和横屏之间切换。响应式网站的点击区域要大到拇指能轻松点中，图片在高密度屏幕上要清晰，布局在旋转后也不能错乱。
响应式设计与自适应设计的区别
| 响应式设计 | 自适应设计 | |
|---|---|---|
| 布局 | 一套流式布局，在断点处变化 | 多套固定布局，每类设备一套 |
| 尺寸之间 | 平滑伸缩 | 跳到最接近的固定布局 |
| 设备识别 | 不需要，CSS 根据视口作出反应 | 通常在服务器端读取 User-Agent |
| 维护 | 一套代码 | 多套模板需要同步 |
| 目前的使用场景 | 几乎所有网站 | 少数移动端需求差异很大的大型网站和应用 |
中文里“自适应”常被当作“响应式”的同义词使用。真正有用的区分是：布局是流式还是固定的，适配是靠 CSS 还是靠服务器。
如今如何实现响应式设计
和 2010 年相比，现代 CSS 让响应式布局简单了很多：
- viewport meta 标签告诉手机浏览器使用设备宽度。没有它，其他手段都不起作用。参见 viewport meta 标签详解。
- Flexbox 和 CSS Grid 可以做出自动换行的布局。
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))不用任何媒体查询，就能得到从一列到四列自动变化的卡片网格。 - 媒体查询在选定的宽度切换布局，还能响应屏幕方向、深色模式、减少动态效果和输入方式。语法和示例见 CSS 媒体查询指南。
- 容器查询让组件根据自身容器的宽度而不是整个屏幕作出反应，同一张卡片放在侧边栏和主栏里都能正常显示。
- 用
clamp()实现流式排版，标题字号随屏幕平滑缩放。 - 用
srcset和sizes实现响应式图片，让浏览器下载适合当前屏幕尺寸的文件。
Tailwind CSS 和 Bootstrap 等框架把这些技术和预设断点打包在一起。
响应式布局模式示例
- 列下沉（Column drop）：屏幕变窄时，各列依次堆叠到下方。
- 侧滑菜单（Off-canvas）：小屏幕上点击按钮后，菜单从侧边滑出。
- 内容优先：在手机上把关键操作（搜索、“立即预订”）移到顶部。
- 响应式表格：表格在自己的容器内横向滚动，或把每一行变成卡片。
- 艺术指导：用
<picture>元素在手机上显示裁切方式不同的图片。
如何测试响应式网站
要在多个宽度下测试，不能只看“手机”和“桌面”两种。在 Chrome DevTools 里拖动响应式视口，找出布局在哪里出问题，再用具体机型及其真实的 User-Agent 和像素比进行检查。这一步可以用 Mobile View Extension 这类一键切换手机视图的工具，不用打开 DevTools 就能在各种机型预设下查看同一个页面。最后在真机上确认。完整方法见如何测试响应式设计。
常见问题
响应式设计的主要目标是什么？
无论访客的屏幕多大，都用同一套代码为他们提供内容相同、易读易用的页面。
响应式和移动端友好是一回事吗？
响应式设计是让网站适配移动端的一种方式，也是最常见的方式。但网站做了响应式，在手机上也可能不好用，比如按钮太小，或者在手机上加载很慢。参见如何让网站适配手机。
响应式网页设计是谁发明的？
Ethan Marcotte 在 2010 年发表于 A List Apart 的文章中提出了这个术语和方法。