一、为什么需要响应式设计
2011年，用户访问网站的设备越来越多样化：桌面电脑（1024px、1280px、1920px）、iPad（768px竖屏、1024px横屏）、各种Android手机（320px-480px）。如果为每种设备单独做一套网站，维护成本极高。
响应式设计的价值在于：一套代码、一个URL、维护成本低，同时在各种设备上都能提供良好体验。
二、三大核心技术
2.1 流式网格布局（Fluid Grid）
传统布局使用固定像素宽度（如960px居中），流式布局使用百分比定义宽度。例如：
.container { width: 90%; max-width: 1024px; margin: 0 auto; }
.sidebar { width: 30%; float: left; }
.content { width: 68%; float: right; }
这样布局会随容器宽度自动伸缩。
2.2 弹性图片（Flexible Images）
图片默认不会自动缩放，需要设置：
img { max-width: 100%; height: auto; }
这样图片会在容器变窄时等比例缩小，不会溢出。
2.3 CSS媒体查询（Media Queries）
媒体查询是响应式设计的灵魂，可以根据屏幕宽度应用不同的CSS规则：
@media screen and (max-width: 768px) {
.sidebar { width: 100%; float: none; }
.content { width: 100%; float: none; }
}当屏幕宽度小于768px时，侧边栏和内容区都变为100%宽度、不再浮动，实现单栏布局。
三、2011年的实践断点
我们通常设置三个断点：
- 默认（桌面）：大于960px，三栏或两栏布局。
- 平板：768px-959px，调整为两栏或单栏。
- 手机：小于767px，单栏流式布局，导航折叠为下拉菜单。
四、响应式 vs 独立移动站
2011年我们也在讨论：到底是做响应式网站，还是单独做一个m.xxx.com的移动站？
两种方案各有优劣：
- 响应式：维护成本低，URL统一，但小屏幕上仍加载了所有资源，速度较慢。
- 独立移动站：可以针对手机优化图片和资源，加载更快，但需要维护两套代码。
实际项目中，我们根据客户情况选择：内容少、更新频繁的企业官网适合响应式；内容重、对性能要求高的电商类网站，独立移动站体验更好。
五、viewport设置
移动浏览器默认会将页面缩小到桌面宽度来显示，必须在HTML头部设置：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这样手机浏览器才会按照设备宽度渲染页面，媒体查询才能生效。
六、总结
响应式设计是2011年前端领域最重要的概念之一。虽然当时的实现还比较粗糙（很多站点只是简单地把多栏变成单栏），但它奠定了此后十年Web开发的基本范式。到2012年，我们新做的企业官网已经全部采用响应式布局。