Tailwind CSS - 响应式设计

使用 Tailwind CSS 实现现代响应式设计

响应式设计是现代 Web 开发的基本原则，它确保你的应用程序在从小型智能手机到大型桌面显示器等任何设备上都能完美呈现和运行。Tailwind CSS 提倡移动优先的方法，提供响应式修饰符，让你能够直接在 HTML 中构建自适应布局。

响应式设置

在开始之前，请确保你的 HTML <head> 中包含视口（viewport）meta 标签。此标签指示浏览器如何控制页面的尺寸和缩放，这对于响应式设计正确运行至关重要。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Page</title>
  <!-- 对于生产环境，你应该通过 npm 设置 Tailwind -->
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <!-- 你的内容在此处 -->
</body>
</html>

核心概念：移动优先断点

Tailwind 的方法论是移动优先的。这意味着没有前缀的工具类（例如 p-4、text-center）适用于所有屏幕尺寸，而带前缀的工具类（例如 md:p-8、lg:text-left）仅从特定断点开始及以上尺寸生效。

要使工具类具有响应性，请在其前面加上断点前缀，后跟冒号（:）。例如，md:text-lg 在中等屏幕及以上尺寸应用 text-lg 类。

<!--
  - 默认（移动端）：text-center
  - 中等屏幕（md）及以上：text-left
  - 大型屏幕（lg）及以上：text-right
-->
<div class="text-center md:text-left lg:text-right">
  This text aligns based on the screen size.
</div>

Tailwind 包含一套默认的五个断点，灵感来自常见的设备分辨率。

断点前缀	最小宽度	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) { ... }

实际示例：一个响应式个人资料卡片

让我们构建一个个人资料卡片，它在移动设备上堆叠内容，并在大屏幕上转换为水平布局。这是现代 UI 设计中的常见模式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 dark:bg-slate-900 flex items-center justify-center min-h-screen p-4">

<div class="max-w-sm md:max-w-2xl mx-auto bg-white dark:bg-slate-800 rounded-xl shadow-lg overflow-hidden">
  <div class="md:flex">
    <div class="md:shrink-0">
      <img
        class="h-48 w-full object-cover md:h-full md:w-48"
        src="https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=2592"
        alt="A modern portrait of a woman."
      >
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 dark:text-indigo-400 font-semibold">Lead Developer</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Alex Doe</a>
      <p class="mt-2 text-slate-500 dark:text-slate-400">
        Specializing in full-stack development with a passion for creating accessible and user-friendly web applications.
      </p>
    </div>
  </div>
</div>

</body>
</html>

代码解析

• max-w-sm md:max-w-2xl：卡片在小屏幕上有一个最大宽度，在中等屏幕上会增加，以更好地利用空间。
• md:flex：这是布局转换的关键。默认情况下，div 元素垂直堆叠。在 md 断点处，应用 display: flex，将图像和文本并排放置。
• h-48 w-full md:h-full md:w-48：图像在移动设备上是全宽的。在 md 屏幕上，它的宽度被限制为 w-48（12rem），高度自适应以填充容器。
• md:shrink-0：防止当文本内容较长时图像容器收缩。

针对特定断点范围

要在特定范围（例如，仅在中等屏幕上）应用样式，可以将 min-width 断点与 max-width 修饰符或更大断点的修饰符结合使用。

仅在特定断点显示元素

例如，要仅在中等屏幕 (md) 上显示一个元素，并在小屏幕和大屏幕上隐藏它，你可以这样做：

<!DOCTYPE html>
<html lang="en">
 <head>
  <script src="https://cdn.tailwindcss.com"></script>
 </head>
 <body class="p-4">
  <!-- 默认隐藏，在中等屏幕上可见，在大屏幕上再次隐藏 -->
  <div class="hidden md:block lg:hidden bg-teal-100 border-t-4 border-teal-500 rounded-b text-teal-900 px-4 py-3 shadow-md" role="alert">
    <p class="font-bold">MD-Screen Alert</p>
    <p class="text-sm">This message is only visible between 768px and 1023px.</p>
  </div>
 </body>
</html>

使用 max-* 修饰符

你还可以使用 max-* 前缀来仅在某个断点之下应用样式。这对于在较小屏幕上覆盖样式很有用。

• max-lg:：将样式应用于最大到大屏幕（小于 1024px）。
• max-md:：将样式应用于最大到中等屏幕（小于 768px）。
• max-sm:：将样式应用于最大到小屏幕（小于 640px）。

<!-- 在宽度小于等于 768px 的屏幕上，背景将为红色；在宽度大于 768px 的屏幕上，背景将为蓝色 -->
<div class="p-4 rounded-lg text-white bg-blue-500 max-md:bg-red-500">
  My background is red on small screens and blue on larger ones.
</div>

自定义断点

对于生产项目，你将使用 tailwind.config.js 文件来配置 Tailwind。这允许你自定义、扩展或完全覆盖默认的断点。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"], // 对生产构建很重要！
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      // 你可以添加自己的断点
      'laptop': '1366px',
      'desktop': '1920px',
    },
    extend: {
      // 使用 extend 来添加新断点，而不会移除默认断点
      screens: {
        '3xl': '2000px',
      }
    }
  },
  plugins: [],
}

专家提示：一次性断点的任意值

如果你需要一个单一的、非标准的断点，你可以在 HTML 中直接使用任意值，而无需配置你的主题。这对于微调特定组件非常强大。

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
  <!--
    默认情况下，网格有 1 列，
    在 500px 及以上时有 2 列，
    在 900px 及以上时有 4 列。
  -->
  <div class="grid grid-cols-1 min-[500px]:grid-cols-2 min-[900px]:grid-cols-4 gap-4">
    <div class="bg-sky-500 p-4 rounded-lg text-white">Item 1</div>
    <div class="bg-sky-500 p-4 rounded-lg text-white">Item 2</div>
    <div class="bg-sky-500 p-4 rounded-lg text-white">Item 3</div>
    <div class="bg-sky-500 p-4 rounded-lg text-white">Item 4</div>
  </div>
</body>
</html>