课程进度 33% · 第7/20章第7/20章 · 标签 1/2
— 1 —
响应式设计原理
- 响应式设计（Responsive Design）让网页在不同设备和屏幕尺寸下都能良好显示
- 核心思想：同一套HTML结构，样式自适应变化
- 常用技术：媒体查询、弹性布局、流式布局、图片自适应等
媒体查询
媒体查询是响应式设计的核心，根据设备特性（如宽度、分辨率）应用不同样式。
css
1
/* 媒体查询示例 */
2
/* 移动端 */
3
@media (max-width: 767px) {
4
.container { flex-direction: column; }
5
.sidebar { display: none; }
6
}
7
/* 平板 */
8
@media (min-width: 768px) and (max-width: 1023px) {
9
.container { grid-template-columns: 1fr 1fr; }
10
}
11
/* 桌面 */
12
@media (min-width: 1024px) {
13
.container { grid-template-columns: 1fr 1fr 1fr; }
14
}
— 2 —
弹性与流式布局
- 流式布局：使用百分比、vw/vh等相对单位
- 弹性布局：Flexbox + Grid组合实现自适应
- 图片自适应：max-width: 100%
css
1
/* 弹性与流式布局 */
2
.container { width: 100%; max-width: 1200px; margin: 0 auto; }
3
.column { width: 50%; padding: 2%; }
4
img { max-width: 100%; height: auto; }
移动优先
移动优先策略从小屏开始设计，逐步增强大屏体验。
css
1
/* 移动优先：基础样式为移动端 */
2
.menu { flex-direction: column; }
3
/* 桌面增强 */
4
@media (min-width: 1024px) {
5
.menu { flex-direction: row; }
6
}
响应式媒体查询移动优先流式布局@media