布局与响应式设计-第13章-13.3-响应式实战：电商首页

学习目标

• 掌握从移动端到桌面端的响应式布局适配方案
• 实现导航栏在不同屏幕尺寸下的折叠与展开效果
• 应用相对单位和媒体查询完成电商首页的多设备适配
• 优化图片加载策略提升响应式页面性能

概念讲解

响应式设计（Responsive Web Design）是一种让网页在不同设备（手机、平板、桌面）上自动调整布局和样式的设计方法。电商首页作为用户流量入口，需要确保在各种屏幕尺寸下都能提供良好的浏览体验。本实战项目将采用移动优先（Mobile-First） 策略，先设计移动端布局，再通过媒体查询逐步优化大屏幕体验。

核心设计要点：

• 流式布局：使用百分比、max-width等相对单位，使元素宽度随屏幕变化
• 弹性图片：通过max-width: 100%确保图片不溢出容器
• 媒体查询断点：根据设备宽度（如768px、1200px）调整布局结构
• 导航适配：小屏幕使用汉堡菜单，大屏幕展示完整导航项

语法参考

1. 媒体查询断点设计

/* 基础样式（默认移动端） */
.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. 弹性图片与背景

/* 弹性图片 */
.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. 汉堡菜单实现

/* 移动端隐藏桌面导航 */
.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结构

<title>响应式电商首页</title>

  <!-- 头部导航 -->
  <header class="header">
    <div class="container">
      <div class="header-content">
        <h1 class="logo">电商平台</h1>
        <!-- 汉堡按钮 -->
        <button class="hamburger" id="hamburger">☰</button>
        <!-- 桌面导航 -->
        <nav class="desktop-nav">

<ul>

<li><a href="/">首页</a></li>

<li><a href="/">分类</a></li>

<li><a href="/">优惠</a></li>

<li><a href="/">我的</a></li>
          </ul>
        </nav>
        <!-- 移动端导航 -->
        <nav class="mobile-nav" id="mobileNav">

<ul>

<li><a href="/">首页</a></li>

<li><a href="/">分类</a></li>

<li><a href="/">优惠</a></li>

<li><a href="/">我的</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>

  <!-- 英雄区 -->
  <section class="hero">
    <div class="container">
      <div class="hero-content">

<h2>限时优惠</h2>

<p>全场商品低至5折</p>
        <button class="btn">立即抢购</button>
      </div>
    </div>
  </section>

  <!-- 商品列表 -->
  <section class="products">
    <div class="container">

<h2>热门商品</h2>
      <div class="product-grid">
        <!-- 商品卡片1 -->
        <div class="product-card">
          <img src="/images/mobile/product1.jpg" alt="商品名称">

<h3>商品名称</h3>
          <p class="price">¥99.00</p>
          <button class="add-to-cart">加入购物车</button>
        </div>
        <!-- 商品卡片2-6省略 -->
      </div>
    </div>
  </section>

  <!-- 页脚 -->
  <footer class="footer">
    <div class="container">

<p>© 2025 电商平台 版权所有</p>
    </div>
  </footer>

3. 核心CSS代码（layout.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）

// 汉堡菜单切换
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"实现图片懒加载：<img src="/product.jpg" loading="lazy">

2. 性能优化

• 媒体查询断点不宜过多，建议控制在3-4个（移动端、平板、桌面、大屏桌面）
• 避免在小屏幕上加载大屏资源，可通过CSSdisplay: 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的区别。

（答案及解析见附录）