先在手机上打开一个网站，然后在笔记本电脑上打开，最后在电视上打开。如果在这三个设备上看起来都很正常，无需眯眼或缩放，那么这个网站就是采用响应式设计。这种方法允许同一套代码库根据不同的屏幕尺寸自动调整布局、图片和字体。

2010年，移动浏览呈爆炸式增长，设计师们面临着一个选择：为每种设备构建单独的网站，还是构建一个能够适应不同设备的网站。Ethan Marcotte 创造了“响应式设计”这个术语。最终，响应式设计胜出。其核心工具包括流式网格、弹性图像和媒体查询。媒体查询会询问浏览器视口的宽度，并根据浏览器的回答应用不同的 CSS 规则。

是什么让设计具有响应式？

• 使用百分比而非固定像素的动态网格
• 可灵活缩放的图像，可在容器内扩展
• 媒体查询可针对不同的屏幕尺寸应用断点
• 移动布局上的触控友好型目标

目标不仅仅是将内容适配到小屏幕上，而是要确保在任何情况下都能保持可读性、层级性和易用性。桌面端的三栏布局在手机上可能会变成单栏，汉堡菜单可以取代完整的导航栏。优秀的响应式设计让人感觉浑然天成，仿佛网站原本就应该在你的设备上呈现出这种效果。