English 中文 العربية 日本語 Português

Tailwind CSS: Tailwind CSS 响应式设计：断点系统与Mobile-First策略

1. 断点系统

Tailwind 提供 5 个默认断点，使用响应式前缀可以针对不同屏幕尺寸应用样式。

前缀 最小宽度 CSS 媒体查询 常见设备
sm: 640px @media (min-width: 640px) 手机横屏
md: 768px @media (min-width: 768px) 平板
lg: 1024px @media (min-width: 1024px) 笔记本
xl: 1280px @media (min-width: 1280px) 桌面显示器
2xl: 1536px @media (min-width: 1536px) 大屏显示器

传统 CSS vs Tailwind 传统方式需要编写多个 @media 查询并在不同文件中维护样式，而 Tailwind 使用 sm:、md: 等前缀直接在 HTML 中声明响应式样式。

2. Mobile-First 策略

Tailwind 采用 Mobile-First（移动优先）策略：无前缀的样式默认应用于最小屏幕，较大的断点前缀覆盖较小屏幕的样式。

▶ 示例

HTML 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mobile-First 策略</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-4 md:p-8">
  <div class="max-w-6xl mx-auto space-y-8">
    <!-- 响应式文字 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">响应式文字大小</h3>
      <p class="text-sm md:text-base lg:text-lg xl:text-xl">
        默认小屏幕使用 text-sm，中等屏幕 text-base，大屏幕 text-lg，超大屏幕 text-xl
      </p>
    </div>

    <!-- 响应式内边距 -->
    <div class="bg-blue-100 rounded-lg p-2 sm:p-4 md:p-6 lg:p-8">
      <p class="text-center text-blue-800">响应式内边距：p-2 → sm:p-4 → md:p-6 → lg:p-8</p>
    </div>

    <!-- 响应式显示隐藏 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">响应式显示隐藏</h3>
      <div class="block md:hidden bg-red-100 p-4 rounded text-center text-red-700">
        仅在小屏幕显示（block md:hidden）
      </div>
      <div class="hidden md:block bg-green-100 p-4 rounded text-center text-green-700">
        中等屏幕及以上显示（hidden md:block）
      </div>
    </div>
  </div>
</body>
</html>
▶ 试一试
💡 提示： Mobile-First 意味着无前缀样式是基础样式，断点前缀用于增强。例如 text-sm md:text-lg 表示小屏幕 14px，中等屏幕及以上 18px。

3. 响应式前缀实战

响应式前缀可以与任意 Tailwind 类组合，实现不同屏幕尺寸下的布局变化。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式前缀实战</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-4 md:p-8">
  <div class="max-w-6xl mx-auto space-y-8">
    <!-- 响应式 Flex 布局 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">响应式 Flex 布局</h3>
      <div class="flex flex-col sm:flex-row gap-4">
        <div class="flex-1 bg-blue-100 p-4 rounded text-center">项目 1</div>
        <div class="flex-1 bg-blue-200 p-4 rounded text-center">项目 2</div>
        <div class="flex-1 bg-blue-300 p-4 rounded text-center">项目 3</div>
      </div>
      <p class="text-sm text-gray-500 mt-2">小屏幕纵向排列（flex-col），中等屏幕横向排列（sm:flex-row）</p>
    </div>

    <!-- 响应式 Grid 列数 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">响应式 Grid 列数</h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
        <div class="bg-green-100 p-4 rounded text-center">1</div>
        <div class="bg-green-200 p-4 rounded text-center">2</div>
        <div class="bg-green-300 p-4 rounded text-center">3</div>
        <div class="bg-green-400 p-4 rounded text-center">4</div>
        <div class="bg-green-500 p-4 rounded text-center text-white">5</div>
        <div class="bg-green-600 p-4 rounded text-center text-white">6</div>
        <div class="bg-green-700 p-4 rounded text-center text-white">7</div>
        <div class="bg-green-800 p-4 rounded text-center text-white">8</div>
      </div>
      <p class="text-sm text-gray-500 mt-2">grid-cols-1 → sm:grid-cols-2 → lg:grid-cols-3 → xl:grid-cols-4</p>
    </div>

    <!-- 响应式间距 -->
    <div class="bg-white rounded-lg shadow p-4 sm:p-6 md:p-8">
      <h3 class="font-semibold mb-2 sm:mb-4 md:mb-6">响应式间距</h3>
      <div class="space-y-2 sm:space-y-4 md:space-y-6">
        <div class="bg-purple-100 p-4 rounded">项目 A</div>
        <div class="bg-purple-200 p-4 rounded">项目 B</div>
        <div class="bg-purple-300 p-4 rounded">项目 C</div>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 44 行（超过 40 行限制，仅展示）

传统 CSS vs Tailwind 传统方式需要编写 @media (min-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); } } 等多段 CSS，而 Tailwind 使用 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 一行完成。

4. 响应式图片

响应式图片确保图片在不同屏幕尺寸下正确显示，避免溢出或变形。

▶ 示例

HTML 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式图片</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-4 md:p-8">
  <div class="max-w-6xl mx-auto space-y-8">
    <!-- 响应式图片宽度 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">响应式图片宽度</h3>
      <img src="https://picsum.photos/1200/400" alt="响应式图片"
           class="w-full md:w-3/4 lg:w-1/2 mx-auto rounded-lg">
      <p class="text-sm text-gray-500 mt-2 text-center">w-full → md:w-3/4 → lg:w-1/2</p>
    </div>

    <!-- 响应式图片网格 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">响应式图片网格</h3>
      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 md:gap-4">
        <img src="https://picsum.photos/300/300?random=1" alt="图片1" class="w-full aspect-square object-cover rounded-lg">
        <img src="https://picsum.photos/300/300?random=2" alt="图片2" class="w-full aspect-square object-cover rounded-lg">
        <img src="https://picsum.photos/300/300?random=3" alt="图片3" class="w-full aspect-square object-cover rounded-lg">
        <img src="https://picsum.photos/300/300?random=4" alt="图片4" class="w-full aspect-square object-cover rounded-lg">
        <img src="https://picsum.photos/300/300?random=5" alt="图片5" class="w-full aspect-square object-cover rounded-lg">
        <img src="https://picsum.photos/300/300?random=6" alt="图片6" class="w-full aspect-square object-cover rounded-lg">
        <img src="https://picsum.photos/300/300?random=7" alt="图片7" class="w-full aspect-square object-cover rounded-lg">
        <img src="https://picsum.photos/300/300?random=8" alt="图片8" class="w-full aspect-square object-cover rounded-lg">
      </div>
    </div>
  </div>
</body>
</html>
▶ 试一试
💡 提示： 使用 w-full 确保图片不溢出父容器，配合 object-cover 保持图片比例。

5. 响应式表格

响应式表格在小屏幕上可以横向滚动，避免内容挤压。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式表格</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-4 md:p-8">
  <div class="max-w-6xl mx-auto">
    <div class="bg-white rounded-lg shadow p-4 md:p-6">
      <h3 class="font-semibold mb-4">响应式表格</h3>
      <div class="overflow-x-auto">
        <table class="w-full text-sm md:text-base">
          <thead>
            <tr class="bg-gray-100">
              <th class="p-2 md:p-3 text-left">编号</th>
              <th class="p-2 md:p-3 text-left">名称</th>
              <th class="p-2 md:p-3 text-left hidden sm:table-cell">邮箱</th>
              <th class="p-2 md:p-3 text-left hidden md:table-cell">电话</th>
              <th class="p-2 md:p-3 text-left">状态</th>
            </tr>
          </thead>
          <tbody>
            <tr class="border-b">
              <td class="p-2 md:p-3">001</td>
              <td class="p-2 md:p-3">张三</td>
              <td class="p-2 md:p-3 hidden sm:table-cell">zhangsan@example.com</td>
              <td class="p-2 md:p-3 hidden md:table-cell">138-0000-0001</td>
              <td class="p-2 md:p-3"><span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs">活跃</span></td>
            </tr>
            <tr class="border-b">
              <td class="p-2 md:p-3">002</td>
              <td class="p-2 md:p-3">李四</td>
              <td class="p-2 md:p-3 hidden sm:table-cell">lisi@example.com</td>
              <td class="p-2 md:p-3 hidden md:table-cell">138-0000-0002</td>
              <td class="p-2 md:p-3"><span class="bg-yellow-100 text-yellow-700 px-2 py-1 rounded text-xs">待定</span></td>
            </tr>
            <tr class="border-b">
              <td class="p-2 md:p-3">003</td>
              <td class="p-2 md:p-3">王五</td>
              <td class="p-2 md:p-3 hidden sm:table-cell">wangwu@example.com</td>
              <td class="p-2 md:p-3 hidden md:table-cell">138-0000-0003</td>
              <td class="p-2 md:p-3"><span class="bg-red-100 text-red-700 px-2 py-1 rounded text-xs">停用</span></td>
            </tr>
          </tbody>
        </table>
      </div>
      <p class="text-sm text-gray-500 mt-4">小屏幕隐藏部分列，表格可横向滚动</p>
    </div>
  </div>
</body>
</html>
逻辑代码 53 行（超过 40 行限制，仅展示）

传统 CSS vs Tailwind 传统方式需要编写 @media 查询来控制表格列的显示隐藏，而 Tailwind 使用 hidden sm:table-cell 等类名直接声明。

6. 容器查询（@container）

容器查询根据父容器尺寸而非视口尺寸来应用样式，是 Tailwind v4 支持的新特性。

▶ 示例

HTML 📖 仅展示 
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>容器查询</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-4 md:p-8">
  <div class="max-w-6xl mx-auto space-y-8">
    <!-- 容器查询基础 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">容器查询基础</h3>
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- 小容器 -->
        <div class="@container bg-gray-50 rounded-lg p-4 border-2 border-dashed border-gray-300">
          <div class="flex flex-col @md:flex-row gap-4">
            <img src="https://picsum.photos/150/150" alt="头像" class="w-20 h-20 @md:w-24 @md:h-24 rounded-full object-cover">
            <div>
              <h4 class="font-semibold @md:text-lg">用户名称</h4>
              <p class="text-gray-600 text-sm @md:text-base">这是一个容器查询示例，布局根据父容器宽度变化。</p>
            </div>
          </div>
          <p class="text-xs text-gray-400 mt-2">小容器：纵向布局</p>
        </div>

        <!-- 大容器 -->
        <div class="@container bg-gray-50 rounded-lg p-4 border-2 border-dashed border-gray-300">
          <div class="flex flex-col @md:flex-row gap-4">
            <img src="https://picsum.photos/150/150" alt="头像" class="w-20 h-20 @md:w-24 @md:h-24 rounded-full object-cover">
            <div class="flex-1">
              <h4 class="font-semibold @md:text-lg">用户名称</h4>
              <p class="text-gray-600 text-sm @md:text-base">容器查询使用 @container 和 @md: 等前缀，根据父容器尺寸应用样式。</p>
              <div class="hidden @lg:flex gap-2 mt-2">
                <span class="bg-blue-100 text-blue-700 px-2 py-1 rounded text-xs">标签1</span>
                <span class="bg-green-100 text-green-700 px-2 py-1 rounded text-xs">标签2</span>
              </div>
            </div>
          </div>
          <p class="text-xs text-gray-400 mt-2">大容器：横向布局，显示额外标签</p>
        </div>
      </div>
    </div>

    <!-- 容器查询卡片 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">容器查询卡片</h3>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="@container bg-gray-50 rounded-lg overflow-hidden border">
          <img src="https://picsum.photos/400/200?random=10" alt="卡片图片" class="w-full h-32 @sm:h-48 object-cover">
          <div class="p-4">
            <h4 class="font-semibold @sm:text-lg">卡片标题</h4>
            <p class="text-gray-600 text-sm @sm:text-base mt-2">容器查询让组件根据自身容器尺寸响应，而非视口尺寸。</p>
            <button class="hidden @sm:block mt-4 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">了解更多</button>
          </div>
        </div>
        <div class="@container bg-gray-50 rounded-lg overflow-hidden border">
          <img src="https://picsum.photos/400/200?random=11" alt="卡片图片" class="w-full h-32 @sm:h-48 object-cover">
          <div class="p-4">
            <h4 class="font-semibold @sm:text-lg">卡片标题</h4>
            <p class="text-gray-600 text-sm @sm:text-base mt-2">这使得组件在不同布局中都能正确响应，更加灵活。</p>
            <button class="hidden @sm:block mt-4 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">了解更多</button>
          </div>
        </div>
        <div class="@container bg-gray-50 rounded-lg overflow-hidden border">
          <img src="https://picsum.photos/400/200?random=12" alt="卡片图片" class="w-full h-32 @sm:h-48 object-cover">
          <div class="p-4">
            <h4 class="font-semibold @sm:text-lg">卡片标题</h4>
            <p class="text-gray-600 text-sm @sm:text-base mt-2">使用 @container 类标记容器，@sm:、@md: 等前缀应用样式。</p>
            <button class="hidden @sm:block mt-4 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">了解更多</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
逻辑代码 71 行（超过 40 行限制，仅展示）

传统 CSS vs Tailwind 传统容器查询需要编写 @container (min-width: 400px) { ... } 媒体查询，而 Tailwind 使用 @container 类和 @sm:、@md: 等前缀直接声明。

💡 提示： 容器查询断点前缀使用 @xs:（20rem）、@sm:（24rem）、@md:（28rem）、@lg:（32rem）、@xl:（36rem）、@2xl:（42rem）。

❓ 常见问题

Q 响应式前缀的顺序重要吗？
A 重要。Tailwind 采用 Mobile-First 策略，断点前缀按从小到大生效。例如 text-sm md:text-base lg:text-lg，较大断点会覆盖较小断点的样式。
Q 如何隐藏某个元素在特定屏幕尺寸下？
A 使用 hidden 和 block 组合。例如 hidden md:block 表示小屏幕隐藏、中等屏幕显示；block md:hidden 表示小屏幕显示、中等屏幕隐藏。
Q 容器查询和媒体查询有什么区别？
A 媒体查询（sm:、md: 等）根据视口宽度响应；容器查询（@container、@sm: 等）根据父容器宽度响应。容器查询更适合可复用组件在不同布局中的响应式需求。
Q 如何自定义断点？
A 在 Tailwind v4 中，使用 @theme 指令自定义断点。例如 @theme { --breakpoint-tablet: 768px; } 然后使用 tablet: 前缀。

📖 小节

📝 作业

  1. ⭐ 创建一个响应式导航栏：小屏幕使用汉堡菜单（block md:hidden），中等屏幕显示完整导航（hidden md:flex）

  2. ⭐⭐ 创建一个响应式产品卡片网格：小屏幕 1 列（grid-cols-1），中等屏幕 2 列（md:grid-cols-2），大屏幕 4 列（lg:grid-cols-4），卡片在悬停时放大（hover:scale-105）

  3. ⭐⭐⭐ 创建一个响应式仪表盘布局：使用容器查询实现侧边栏组件，在窄容器中折叠为图标（@lg: 显示文字），宽容器中展开显示完整菜单文字

Web-Tutorial.com

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏