一个网站，多种屏幕。响应式设计使单一布局能够适应不同的设备尺寸和方向。该术语由 Ethan Marcotte 于 2010 年提出，其灵感源于早期关于灵活网格和流式图像的理念。设计师无需为桌面和移动设备分别构建网站，而是创建一套代码库，使其能够根据视口宽度自动调整布局。

三个技术要素使其得以实现。流式网格使用百分比而非固定像素，因此列会伸缩。柔性图像会根据容器大小进行缩放。媒体查询会检测屏幕尺寸，并在定义的断点应用不同的 CSS 规则。例如，桌面端的三列布局在手机端可能会折叠成单列，导航栏也会变成汉堡菜单。其目标并非像素级的精确控制，而是优雅的自适应。

核心技术

• 基于百分比的流体网格。
• 灵活的图像和媒体。
• 在指定断点处进行媒体查询。
• 移动优先的内容策略。

响应式设计如今已成为标准做法。用户希望无论在手机、平板电脑、笔记本电脑还是电视上打开网站，都能正常使用。