05. 响应式设计

1. 什么是响应式设计

响应式设计是指网页能够根据不同设备的屏幕尺寸，自动调整布局和样式，在手机、平板、电脑上都有良好的显示效果。

手机 (手机版)      平板 (平板版)      电脑 (桌面版)
┌────────┐        ┌──────────┐      ┌────────────────┐
│ 卡片1  │        │ 卡片1  │卡片2│   │ 卡片1 │卡片2 │卡片3 │
├────────┤        └──────────┘      │──────│──────│──────│
│ 卡片2  │                           │ 卡片4 │卡片5 │卡片6 │
├────────┤                           └────────────────┘
│ 卡片3  │
└────────┘

2. Tailwind 的响应式系统

2.1 断点系统

Tailwind 提供了 5 个默认断点，遵循移动优先原则：

断点 前缀 最小宽度 说明
手机 无 0 默认样式（所有设备）
平板 sm: 640px 小屏幕设备
平板 md: 768px 中等屏幕
电脑 lg: 1024px 大屏幕
电脑 xl: 1280px 超大屏幕
电脑 2xl: 1536px 2K 屏幕

2.2 移动优先原则

核心思想：先写手机版样式，再用断点前缀覆盖更大的屏幕。

<!-- 手机版：1列，平板版：2列，电脑版：4列 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
  ...
</div>

解读：

  • grid-cols-1：所有设备都应用（手机）
  • md:grid-cols-2：宽度 ≥ 768px 时，覆盖为 2 列
  • lg:grid-cols-4：宽度 ≥ 1024px 时，覆盖为 4 列

3. 基础响应式用法

3.1 布局响应式

<!-- Flex 布局：手机竖排，电脑横排 -->
<div class="flex flex-col md:flex-row">
  <div class="p-4">内容1</div>
  <div class="p-4">内容2</div>
</div>

3.2 文字大小响应式

<!-- 手机小字，电脑大字 -->
<h1 class="text-xl md:text-3xl lg:text-5xl">
  响应式标题
</h1>

3.3 间距响应式

<!-- 手机小内边距，电脑大内边距 -->
<div class="p-4 md:p-6 lg:p-8">
  内容
</div>

3.4 显示/隐藏响应式

<!-- 手机隐藏，电脑显示 -->
<div class="hidden md:block">
  电脑版才显示
</div>

<!-- 手机显示，电脑隐藏 -->
<div class="block md:hidden">
  只有手机显示
</div>

4. 常用响应式模式

4.1 响应式网格（最常用）

<!-- 卡片网格：手机1列，平板2列，电脑3列，大屏4列 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  <div class="bg-white p-4 rounded shadow">卡片1</div>
  <div class="bg-white p-4 rounded shadow">卡片2</div>
  <div class="bg-white p-4 rounded shadow">卡片3</div>
  <div class="bg-white p-4 rounded shadow">卡片4</div>
</div>

4.2 响应式导航栏

<!-- 手机版：汉堡菜单（需要 JS），电脑版：横排菜单 -->
<nav class="bg-white shadow">
  <div class="container mx-auto px-4">
    <div class="flex justify-between items-center py-4">
      <!-- Logo -->
      <div class="text-xl font-bold">Logo</div>
      
      <!-- 手机版汉堡菜单按钮 -->
      <button class="block md:hidden">
        <svg>...</svg>
      </button>
      
      <!-- 电脑版菜单 -->
      <div class="hidden md:flex space-x-6">
        <a href="#" class="hover:text-blue-500">首页</a>
        <a href="#" class="hover:text-blue-500">关于</a>
        <a href="#" class="hover:text-blue-500">服务</a>
        <a href="#" class="hover:text-blue-500">联系</a>
      </div>
    </div>
  </div>
</nav>

4.3 响应式侧边栏

<!-- 手机版：隐藏侧边栏，电脑版：显示 -->
<div class="flex">
  <!-- 侧边栏 -->
  <aside class="w-64 bg-gray-800 text-white hidden md:block">
    侧边栏内容
  </aside>
  
  <!-- 主内容 -->
  <main class="flex-1 p-4">
    主内容区域
  </main>
</div>

4.4 响应式字体

<!-- 响应式字体大小 -->
<p class="text-sm md:text-base lg:text-lg">
  这段文字在手机上较小，平板上正常，电脑上稍大。
</p>

4.5 响应式间距

<!-- 响应式外边距 -->
<div class="m-2 md:m-4 lg:m-6">
  内边距响应式变化
</div>

5. 自定义断点

5.1 配置自定义断点

在 tailwind.config.js 中自定义：

module.exports = {
  theme: {
    extend: {
      screens: {
        'xs': '480px',      // 超小屏
        'sm': '640px',
        'md': '768px',
        'lg': '1024px',
        'xl': '1280px',
        '2xl': '1536px',
        '3xl': '1920px',    // 自定义
      },
    },
  },
}

5.2 使用自定义断点

<!-- 使用自定义断点 xs -->
<div class="grid grid-cols-1 xs:grid-cols-2">
  ...
</div>

6. 容器查询

6.1 什么是容器查询

容器查询（Container Queries）是根据父容器大小而不是视口大小来调整样式，适合组件化开发。

Tailwind v4 支持容器查询：

<!-- 定义容器 -->
<div class="container">
  <div class="grid grid-cols-1 @sm:grid-cols-2">
    <!-- 当容器宽度 >= 640px 时，变成2列 -->
  </div>
</div>

6.2 容器查询语法

前缀 说明
@sm: 容器宽度 ≥ 640px
@md: 容器宽度 ≥ 768px
@lg: 容器宽度 ≥ 1024px
@xl: 容器宽度 ≥ 1280px

7. 实战案例

7.1 产品展示页

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>响应式产品展示</title>
</head>
<body class="bg-gray-100">

<div class="container mx-auto px-4 py-8">
  <!-- 标题 -->
  <h1 class="text-2xl md:text-3xl lg:text-4xl font-bold text-center mb-8">
    热门产品
  </h1>
  
  <!-- 产品网格 -->
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
    
    <!-- 产品卡片 -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
      <img src="https://picsum.photos/400/300" alt="产品" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="font-bold text-lg mb-2">产品名称</h3>
        <p class="text-gray-600 text-sm mb-3">这是一段简短的产品描述，介绍产品特点。</p>
        <div class="flex justify-between items-center">
          <span class="text-xl font-bold text-blue-600">¥299</span>
          <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition">
            购买
          </button>
        </div>
      </div>
    </div>
    
    <!-- 重复多个产品卡片... -->
    
  </div>
  
  <!-- 响应式布局示例：手机竖排，平板横排 -->
  <div class="mt-12 flex flex-col md:flex-row gap-6">
    <div class="flex-1 bg-white rounded-lg shadow p-6">
      <h2 class="text-xl font-bold mb-3">特色1</h2>
      <p class="text-gray-600">描述特色功能1</p>
    </div>
    <div class="flex-1 bg-white rounded-lg shadow p-6">
      <h2 class="text-xl font-bold mb-3">特色2</h2>
      <p class="text-gray-600">描述特色功能2</p>
    </div>
    <div class="flex-1 bg-white rounded-lg shadow p-6">
      <h2 class="text-xl font-bold mb-3">特色3</h2>
      <p class="text-gray-600">描述特色功能3</p>
    </div>
  </div>
</div>

</body>
</html>

7.2 响应式表格

<!-- 手机版卡片式，电脑版表格 -->
<div class="overflow-x-auto">
  <table class="min-w-full">
    <thead class="hidden md:table-header-group">
      <tr class="bg-gray-100">
        <th class="p-2 text-left">姓名</th>
        <th class="p-2 text-left">职位</th>
        <th class="p-2 text-left">部门</th>
      </tr>
    </thead>
    <tbody>
      <tr class="block md:table-row mb-4 md:mb-0 border md:border-none">
        <td class="block md:table-cell p-2">
          <span class="md:hidden font-bold">姓名：</span>张三
        </td>
        <td class="block md:table-cell p-2">
          <span class="md:hidden font-bold">职位：</span>工程师
        </td>
        <td class="block md:table-cell p-2">
          <span class="md:hidden font-bold">部门：</span>技术部
        </td>
      </tr>
    </tbody>
  </table>
</div>

8. 响应式设计技巧

8.1 移动优先开发流程

  1. 先设计手机版：确保在小屏幕上功能完整
  2. 逐步增加断点：用 sm:、md:、lg: 逐步增强
  3. 测试真实设备：在不同尺寸设备上测试

8.2 常见响应式模式

模式 手机 平板 电脑
单列 grid-cols-1 md:grid-cols-2 lg:grid-cols-4
侧边栏隐藏 hidden md:block md:block
字体增大 text-base md:text-lg lg:text-xl
间距增大 p-4 md:p-6 lg:p-8

8.3 测试工具

  • Chrome DevTools 设备模拟器
  • 浏览器窗口缩放
  • 真实手机/平板测试

9. 练习

练习 1：响应式博客布局

要求：

  • 手机版：单列，文章卡片上下排列
  • 平板版：2 列网格
  • 电脑版：3 列网格
  • 每张卡片包含：图片、标题、摘要

参考答案：

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <article class="bg-white rounded-lg shadow overflow-hidden">
    <img src="image.jpg" class="w-full h-48 object-cover">
    <div class="p-4">
      <h3 class="font-bold text-lg mb-2">文章标题</h3>
      <p class="text-gray-600">文章摘要...</p>
    </div>
  </article>
</div>

练习 2：响应式侧边栏

要求：

  • 手机版：侧边栏隐藏，主内容全宽
  • 电脑版：侧边栏显示，宽度 250px，主内容自适应

参考答案：

<div class="flex flex-col md:flex-row">
  <aside class="w-full md:w-64 bg-gray-800 text-white p-4 hidden md:block">
    侧边栏
  </aside>
  <main class="flex-1 p-4">
    主内容
  </main>
</div>

10. 总结

概念 说明
移动优先 先写手机版，再用断点覆盖
断点前缀 sm:、md:、lg:、xl:、2xl:
常用模式 网格、导航栏、侧边栏、字体、间距
显示隐藏 hidden md:block / block md:hidden
自定义断点 在 tailwind.config.js 中配置

一句话总结：

响应式设计就是先写手机版，然后用断点前缀告诉 Tailwind 在大屏幕上怎么变。

11. 下一步

掌握了响应式设计后，接下来学习暗色模式：

👉 下一节：06. 暗色模式

# css
Logo
AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

2026前端面试真题易错（实战版）

——不要说“技术难点”，要说“业务与技术的结合点”，比如“数据量大导致前端卡，我用了虚拟列表 + 分帧渲染，解决了体验问题”。题目：详情页模板中，每个车型都需要单独编写一份 HTML，并嵌入对应的配置数据。· 车型数据由前端数组直接渲染，若数据源被篡改（或用户输入被注入恶意脚本），使用 innerHTML 或 insertAdjacentHTML 可能导致 XSS。· 创建 CarDetail 组

avatar AtomGit开源社区

我的第一个字符驱动：基于Linux2.4之前版本的古法编程

Linux 2.4及更早：字符设备核心管理结构是，通过chrdevs数组管理，必须手动mknod创建设备文件，是古法驱动的核心；Linux 2.6及以后：内核重构字符设备模型，彻底删除，推出取而代之，管理方式升级为链表，融入设备模型，支持自动化设备节点创建；本质不变：无论是还是cdev，核心作用都是绑定设备号和file_operations，作为内核管理字符设备的载体，用户态始终通过设备号+设备文

avatar AtomGit开源社区

一文看懂DFT Memory Repair技术

Memory Repair（内存修复）是一种在芯片制造测试阶段检测并修复存储器缺陷的技术。其核心思想是在存储器设计中预留“冗余”（Redundancy）资源——额外的备用行（Spare Row）和备用列（Spare Column）基础存储器阵列与 Column MUX 架构示意图当检测到存储单元故障时，用这些冗余资源替换故障单元，从而使芯片恢复正常功能。而这个过程最严苛的要求，就是时序收敛。

avatar AtomGit开源社区