什么是响应式设计？
所谓 “响应式设计”，指的是让同一个网页在不同大小的设备上都能有良好的显示效果。在我们现在的移动互联网时代中，网页要适配不同尺寸的设备（比如电脑、手机等），这样网站才会有更好的用户体验，才能更好地留住流量。
就拿咱们绿叶网来说，不管你是使用电脑、手机还是平板，都能有一个比较好的页面体验。这是因为咱们绿叶网会根据不同的屏幕尺寸，来适配呈现不同的页面效果。
在传统的 CSS 中，我们需要使用 “CSS 媒体查询” 技术，然后编写大量 @media 代码才能实现适配不同尺寸屏幕的效果。
比如想要使得一个元素的背景，在手机上是红色，在平板上是绿色，在电脑端是蓝色，可能需要这样去写：
/* 手机端 */
.box {
background-color: red;
}
/* 平板端 */
@media (min-width: 768px) {
.box {
background-color: green;
}
}
/* 电脑端 */
@media (min-width: 1024px) {
.box {
background-color: blue;
}
}上面这样写法是非常繁琐的，而且很容易导致 CSS 文件体积过大。
Tailwind CSS 响应式前缀
Tailwind CSS 将传统媒体查询提炼成了简单的 “响应式前缀（也叫断点前缀）”。这样我们只需要在 HTML 类名前加上 “md:” 这种前缀，就可以控制它在特定屏幕下的样式了。
其中，Tailwind CSS 预设了以下 5 个最常用的响应式前缀，对应了市面上绝大多数的设备尺寸：
sm:：640px（小型屏幕 / 大屏手机）md:：768px（中型屏幕 / 平板电脑）lg:：1024px（大型屏幕 / 笔记本电脑）xl:：1280px（超大屏幕 / 桌面显示器）2xl:：1536px（极大型屏幕）
在使用 Tailwind CSS 响应式设计时，我们必须要遵循一个准则：移动优先（Mobile-First）。那么 “移动优先” 是什么意思呢？
所谓的 “移动优先”，指的是：你不带任何前缀写下的类名，默认就是给手机屏幕看的。只有当屏幕变大时，加上前缀的类名才会生效并覆盖默认样式。
语法：
<div class="bg-red-500 md:bg-green-500 lg:bg-blue-500"></div>说明：
对于上面这句代码来说，正确的理解是：
- 默认情况下（即在手机上），背景颜色是 red。
- 当屏幕宽度达到 “md:”（即 768px）时，背景颜色才会变为 green-500。
- 当屏幕宽度达到 “lg:”（即 1024px）时，背景颜色才会变为 blue-500。
此外需要清楚的是，响应式前缀可以用于任何 Tailwind CSS 类名。比如如果你觉得手机上标题字体太大，电脑上又显得太小，此时可以写成：
text-xl md:text-3xl或者甚至可以在不同设备上切换背景颜色，比如：
bg-white md:bg-gray-100移动优先 vs PC 优先
响应式设计其实可以分为 “移动优先” 和 “PC 优先” 两种写法。但在实际项目开发中，我们是绝对推荐使用 “移动优先”，并不推荐 “PC 优先”。
我们都知道，PC 端显示的内容往往会比移动端的多（小伙伴们可以拿绿叶网对比看看）。如果使用 “PC 优先”，逻辑是 “从大到小减功能”，导致不断打补丁，然后代码更加复杂。而如果使用 “移动优先”，逻辑是 “从小到大加功能”，代码量更小，可维护性更强。
实际上，绝大多数 CSS 框架（包括 Tailwind CSS、Bootstrap）使用的都是 “移动优先”，包括咱们的绿叶网也是使用 “移动优先” 进行设计开发。
示例 1：“导航栏” 响应式设计
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-100">
<nav class="bg-white shadow-md p-4">
<div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between">
<div class="text-2xl font-extrabold text-green-500 mb-4 md:mb-0">
绿叶网
</div>
<div class="flex space-x-6 text-gray-600 font-medium">
<a href="#" class="hover:text-green-500 transition-colors">HTML教程</a>
<a href="#" class="hover:text-green-500 transition-colors">CSS教程</a>
<a href="#" class="hover:text-green-500 transition-colors">JavaScript教程</a>
</div>
</div>
</nav>
</body>
</html>默认情况下（手机端），页面效果如下图所示。当屏幕尺寸达到（md:）时，页面效果如下图所示。
分析：
小伙伴们留意 “flex flex-col md:flex-row” 这一段代码。在手机上，flex-col 会让内部元素（LOGO 和 链接组）上下垂直排列。当屏幕达到平板及以上尺寸（md: 生效）时，flex-row 覆盖了垂直排列，使其变成左右水平排列。
提示: 我们可以通过改变浏览器窗口的大小，来模拟 PC 端和手机端尺寸。
示例 2：“内容列表” 响应式设计
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-50 p-6 min-h-screen">
<div class="max-w-6xl mx-auto">
<h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">精品课程</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white p-6 rounded-2xl shadow-sm hover:shadow-xl transition-shadow cursor-pointer border border-gray-100">
<div class="w-12 h-12 bg-blue-100 text-blue-500 rounded-lg flex items-center justify-center font-bold text-xl mb-4">V</div>
<h3 class="text-xl font-bold text-gray-800">Vue 快速上手</h3>
<p class="mt-2 text-gray-500">用通俗易懂的方式来讲解，让 0 基础小白能够快速上手。</p>
</div>
<div class="bg-white p-6 rounded-2xl shadow-sm hover:shadow-xl transition-shadow cursor-pointer border border-gray-100">
<div class="w-12 h-12 bg-yellow-100 text-yellow-600 rounded-lg flex items-center justify-center font-bold text-xl mb-4">S</div>
<h3 class="text-xl font-bold text-gray-800">SQL 快速上手</h3>
<p class="mt-2 text-gray-500">别具一格的讲解 + 循序渐进的练习 + 深入浅出的案例。</p>
</div>
<div class="bg-white p-6 rounded-2xl shadow-sm hover:shadow-xl transition-shadow cursor-pointer border border-gray-100">
<div class="w-12 h-12 bg-green-100 text-green-500 rounded-lg flex items-center justify-center font-bold text-xl mb-4">V</div>
<h3 class="text-xl font-bold text-gray-800">Python 十大项目</h3>
<p class="mt-2 text-gray-500">采用 10 个当下最热门项目来讲解，更快上手 Python 各个领域。</p>
</div>
</div>
</div>
</body>
</html>当屏幕尺寸小于 768px（即手机端），页面效果如下图所示。
当屏幕尺寸大于等于 768px 但小于 1024px 时，页面效果如下图所示。
当屏幕尺寸大于等于 1024px 时，页面效果如下图所示。
分析：
除了导航栏之外，内容型列表的适配也是很常见的。假如绿叶网有大量的精品课程，在手机上我们希望每行只显示 1 个课程（方便手指点击），在平板上显示 2 个，在宽屏电脑上显示 3 个。此时使用 “Tailwind CSS Grid 布局” 结合响应式修饰符，就可以轻松实现了。
grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3我们只需要仅仅这一行代码，就可以完美解决三端适配。其中，手机端是 grid-cols-1（每行 1 个卡片），平板端 “md:” 触发变成 2 个，大屏幕电脑端 “lg:” 触发变成 3 个。
Tailwind CSS 自定义断点
虽然 Tailwind CSS 预设的断点已经能覆盖大多数现代手机，但在某些极致的移动端适配场景下（比如为了兼容老旧的小屏幕手机，或者处理复杂的导航栏挤压问题），我们可能需要定义一个更小的断点才行，比如 xs（480px）。
在最新的 Tailwind CSS v4 中，自定义断点是非常简单的。我们不再需要修改复杂的 JavaScript 配置文件，而只需要在 CSS 中使用 “@theme 块” 和 “CSS 变量” 即可。
语法：
@theme {
/* 定义一个名为 xs 的新断点 */
--breakpoint-xs: 480px;
/* 也可以修改已有的 md 断点尺寸 */
--breakpoint-md: 800px;
}说明：
只要我们在 CSS 中定义了以 “--breakpoint-” 开头的变量，Tailwind 就会自动为你生成对应的响应式前缀（如 xs:）。
示例 3：自定义 “超小屏” 断点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@theme {
/* 定义一个名为 xs 的超小屏断点 */
--breakpoint-xs: 480px;
}
</style>
</head>
<body class="bg-gray-50 p-6 flex justify-center mt-10">
<div class="bg-white p-6 rounded-2xl shadow-sm flex flex-col xs:flex-row items-center gap-4 w-full max-w-[320px] xs:max-w-md border border-gray-100">
<div class="w-16 h-16 bg-green-100 text-green-500 rounded-full flex items-center justify-center font-bold text-2xl shrink-0">
绿
</div>
<div class="text-center xs:text-left">
<h3 class="text-xl font-bold text-gray-800">绿叶网</h3>
<p class="mt-2 text-sm text-gray-500">
绿叶网专注于教程的易懂性，让完全 0 基础的小白也能更快上手。
</p>
</div>
</div>
</body>
</html>当屏幕尺寸小于 480px 时，页面效果如下图 1 所示。当屏幕尺寸大于等于 480px 时，页面效果如下图 2 所示。
分析：
@theme {
--breakpoint-xs: 480px;
}在 style 标签中，我们通过 @theme 自定义了一个超小屏的断点，该断点名为 “xs:”。接下来就可以在 HTML 中直接使用这个自定义的 “xs:” 前缀了。
在 @theme 块中定义变量时，顺序是不重要的，因为 Tailwind CSS 会自动根据数值大小进行排序。不过在 HTML 中编写类名时，建议保持从小到大的习惯（如 xs: sm: md:），这样代码可读性和可维护性会更好。
