# 布局与响应式设计-第13章-13.3-响应式实战：电商首页
## 学习目标
- 掌握从移动端到桌面端的响应式布局适配方案
- 实现导航栏在不同屏幕尺寸下的折叠与展开效果
- 应用相对单位和媒体查询完成电商首页的多设备适配
- 优化图片加载策略提升响应式页面性能
## 概念讲解
响应式设计（Responsive Web Design）是一种让网页在不同设备（手机、平板、桌面）上自动调整布局和样式的设计方法。电商首页作为用户流量入口，需要确保在各种屏幕尺寸下都能提供良好的浏览体验。本实战项目将采用**移动优先（Mobile-First）** 策略，先设计移动端布局，再通过媒体查询逐步优化大屏幕体验。
核心设计要点：
- **流式布局**：使用百分比、`max-width`等相对单位，使元素宽度随屏幕变化
- **弹性图片**：通过`max-width: 100%`确保图片不溢出容器
- **媒体查询断点**：根据设备宽度（如768px、1200px）调整布局结构
- **导航适配**：小屏幕使用汉堡菜单，大屏幕展示完整导航项
## 语法参考
### 1. 媒体查询断点设计
```css
/* 基础样式（默认移动端） */
.container {
width: 100%;
padding: 0 15px;
margin: 0 auto;
}
/* 平板设备（768px+） */
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
/* 桌面设备（1200px+） */
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
```
### 2. 弹性图片与背景
```css
/* 弹性图片 */
.product-img {
width: 100%;
max-width: 100%;
height: auto; /* 保持宽高比 */
object-fit: cover; /* 裁剪图片以填充容器 */
}
/* 响应式背景图 */
.hero {
background-image: url("mobile-hero.jpg");
background-size: cover;
background-position: center;
}
@media (min-width: 768px) {
.hero {
background-image: url("tablet-hero.jpg");
}
}
```
### 3. 汉堡菜单实现
```css
/* 移动端隐藏桌面导航 */
.desktop-nav {
display: none;
}
/* 汉堡按钮样式 */
.hamburger {
display: block;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
}
/* 移动端导航菜单 */
.mobile-nav {
display: none;
padding: 15px 0;
}
.mobile-nav.active {
display: block;
}
/* 平板及以上显示桌面导航，隐藏汉堡菜单 */
@media (min-width: 768px) {
.desktop-nav {
display: flex;
}
.hamburger, .mobile-nav {
display: none;
}
}
```
## 实战示例：电商首页完整实现
### 1. 项目结构
```
responsive-ecommerce/
├── index.html # 主页面
├── css/
│ ├── base.css # 基础样式（重置、字体、全局样式）
│ ├── layout.css # 布局样式（响应式容器、网格）
│ └── components/ # 组件样式（导航、商品卡片等）
└── images/ # 图片资源（分mobile/tablet/desktop目录）
```
### 2. HTML结构
```html
响应式电商首页
热门商品
商品名称
¥99.00
```
### 3. 核心CSS代码（layout.css）
```css
/* 响应式容器 */
.container {
width: 100%;
padding: 0 15px;
margin: 0 auto;
}
/* 商品网格布局 - 移动端单列 */
.product-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
/* 平板设备（768px+）- 双列布局 */
@media (min-width: 768px) {
.product-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* 桌面设备（1200px+）- 三列布局 */
@media (min-width: 1200px) {
.product-grid {
grid-template-columns: repeat(3, 1fr);
}
}
```
### 4. 交互脚本（nav.js）
```javascript
// 汉堡菜单切换
const hamburger = document.getElementById('hamburger');
const mobileNav = document.getElementById('mobileNav');
hamburger.addEventListener('click', () => {
mobileNav.classList.toggle('active');
hamburger.textContent = mobileNav.classList.contains('active') ? '✕' : '☰';
});
// 监听窗口 resize 事件，确保切换设备时导航状态正确
window.addEventListener('resize', () => {
if (window.innerWidth >= 768) {
mobileNav.classList.remove('active');
hamburger.textContent = '☰';
}
});
```
## 注意事项
### 1. 图片优化
- 使用`srcset`和`sizes`属性加载不同分辨率图片，减少带宽浪费
- 移动端优先加载小尺寸图片，提升加载速度
- 使用`loading="lazy"`实现图片懒加载：`
`
### 2. 性能优化
- 媒体查询断点不宜过多，建议控制在3-4个（移动端、平板、桌面、大屏桌面）
- 避免在小屏幕上加载大屏资源，可通过CSS`display: none`或JavaScript动态加载
- 使用`contain: layout paint`减少重排重绘范围
### 3. 兼容性处理
- 旧浏览器（如IE11）不支持Grid布局，可使用Flexbox降级方案
- 使用Autoprefixer自动添加浏览器前缀（如`-webkit-`、`-moz-`）
- 为不支持`srcset`的浏览器提供默认`src`属性
## 自测题
1. 以下哪个属性用于设置图片在不同屏幕密度下的加载策略？
A. `media`
B. `srcset`
C. `sizes`
D. `loading`
2. 在移动优先的响应式设计中，媒体查询应使用哪个关键字？
A. `max-width`
B. `min-width`
C. `device-width`
D. `orientation`
3. 如何实现商品图片在移动端显示1列、平板2列、桌面3列？
（答案：使用`grid-template-columns: 1fr`，并通过`@media (min-width: 768px)`设置`repeat(2, 1fr)`，`@media (min-width: 1200px)`设置`repeat(3, 1fr)`）
4. 响应式导航中，汉堡菜单通常在什么屏幕尺寸下显示？
A. 所有尺寸
B. 仅移动端（1200px）
D. 平板和移动端
5. 简述`object-fit: cover`和`object-fit: contain`的区别。
（答案及解析见附录）
