01. 概述与原理
响应式网页设计 (RWD) 是一种使网页能够根据用户的行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整的设计方法。
为什么重要？
随着移动设备的普及，用户不再仅通过桌面电脑访问网页。从 4 英寸的手机到 40 英寸的宽屏显示器，你的内容必须无处不在。
- ✅ 提升用户体验 (UX)
- ✅ 有利于 SEO 优化
- ✅ 降低维护成本 (一套代码)
02. 核心技术
Media Queries
CSS3 的基石。允许内容根据视口宽度呈现不同样式。
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}Flexbox
一维布局模型。非常适合组件内部的对齐和分布。
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}CSS Grid
二维布局系统。能够同时处理行和列，构建复杂网格。
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}03. 布局技巧
相对单位的力量
告别 px，拥抱 rem, em, vw, vh。
- rem: 相对于根元素字体大小。
- vw/vh: 相对于视口宽度/高度的 1%。
- %: 相对于父元素。
响应式图片
使用 srcset 让浏览器根据屏幕分辨率加载最合适的图片，节省带宽。
<img src="small.jpg"
srcset="large.jpg 1024w,
medium.jpg 640w,
small.jpg 320w"
sizes="(min-width: 1024px) 1024px,
100vw" />04. 实际应用场景
导航栏折叠
在桌面端显示完整菜单，在移动端自动折叠为"汉堡包"菜单。这是最常见的响应式模式。
卡片网格重排
利用 Grid 的 auto-fit 属性，无需媒体查询即可实现卡片数量随宽度自动调整。
字体排印适配
使用 clamp() 函数设置流体排版，让字体大小随视口平滑缩放。
05. 响应式断点可视化
直观理解不同设备尺寸下的布局变化。
06. 总结与未来趋势
响应式设计已经从简单的媒体查询进化为复杂的布局系统。
🚀 未来已来：Container Queries
CSS 容器查询 (Container Queries) 允许组件根据其父容器的大小而不是视口大小来调整样式。这将彻底改变组件化开发的响应式逻辑。
@container (min-width: 400px) {
.card {
display: flex;
}
}关键要点回顾
- ★ Mobile First: 优先为移动端设计，再扩展到大屏。
- ★ Flexbox & Grid: 现代布局的双子星，缺一不可。
- ★ Fluid Typography: 让文字像水一样流动适应容器。