[CSS 3] Tailwindcss 响应式设计

## 响应式断点

*Tailwind CSS* 默认提供了一组预设的断点，即屏幕尺寸范围，用于管理响应式样式。默认的断点包括：

- *sm*: *640px* 及以上
- *md*: *768px* 及以上
- *lg*: *1024px* 及以上
- *xl*: *1280px* 及以上
- *2xl*: *1536px* 及以上

例如：

```html
<img class="w-16 md:w-32 lg:w-48" src="...">
```

在这个例子中，\<*img*> 标签的 *class* 属性包含了一组 *Tailwind CSS* 类，用于根据不同的屏幕尺寸调整图片的宽度。让我们详细解释这些类的含义：

- *w-16*: 默认情况下，图片的宽度被设置为 *4rem*（*16* x *0.25rem*）。
- *md:w-32*: 当屏幕尺寸达到 "*medium*" (*md*) 断点（默认为 *768px* 及以上）时，图片的宽度将被设置为 *8rem*（*32* x *0.25rem*）。
- *lg:w-48*: 当屏幕尺寸达到 "*large*" (*lg*) 断点（默认为 *1024px* 及以上）时，图片的宽度将被设置为 *12rem*（*48* x *0.25rem*）。

其中的 *md* 等价于 @*media* (*min-width*: *768px*) { ... }

您还可以根据需要在 *tailwind.config.js* 文件中自定义断点。例如：

```js
// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'xs': '480px',
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    },
    // ...其他配置
    // 如果你只是想新增一两个断点，那么还是建议在 extend 里面进行扩展
  },
  variants: {},
  plugins: [],
};
```

在这个例子中，我们添加了一个名为 *xs* 的新断点，其屏幕尺寸为 *480px* 及以上。现在，您可以在 *HTML* 中使用 *xs* 前缀来应用响应式样式，例如：

```html
<div class="w-full xs:w-1/2">
  <!-- Your content goes here -->
</div>
```

有时，您可能需要根据屏幕尺寸控制元素的显示状态。*Tailwind CSS* 提供了一系列响应式显示类来实现这一点。例如：

```html
<div class="hidden md:block">
  <!-- This content is hidden on small screens and visible on medium screens and above -->
</div>
```

在这个例子中，我们使用 *hidden* 类将元素默认设置为隐藏状态，然后使用 *md:block* 类在中等尺寸屏幕和更大的屏幕上显示元素。

再来看一下弹性盒和网格布局相关的例子。例如：

```html
<div class="flex flex-col lg:flex-row">
  <div class="w-full lg:w-1/3">
    <!-- Column 1 content -->
  </div>
  <div class="w-full lg:w-1/3">
    <!-- Column 2 content -->
  </div>
  <div class="w-full lg:w-1/3">
    <!-- Column 3 content -->
  </div>
</div>
```

在这个例子中，我们使用 *flex flex-col* 类将 *Flexbox* 布局默认设置为垂直方向。随后，在大屏幕（*lg* 断点）上，我们使用 *lg:flex-row* 类将布局切换为水平方向。

类似地，您可以使用响应式 *Grid* 类来创建自适应 *Grid* 布局。例如：

```html
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
  <div>
    <!-- Column 1 content -->
  </div>
  <div>
    <!-- Column 2 content -->
  </div>
  <div>
    <!-- Column 3 content -->
  </div>
</div>
```

在这个例子中，我们使用 *grid grid-cols-1* 类将 *Grid* 布局默认设置为单列。随后，在中等尺寸屏幕上，我们使用 *md:grid-cols-2* 类将布局切换为双列，而在大屏幕上，我们使用 *lg:grid-cols-3* 类将布局切换为三列。