tailwind-responsive-design

用途

Tailwind CSS 提供了一套移动优先的响应式设计系统，通过断点前缀让开发者方便地构建自适应布局。本技能适用于在 Tailwind CSS 中构建响应式布局和移动优先设计的场景，内容覆盖断点、容器查询和响应式工具类。

核心概念

移动优先方法

Tailwind 使用移动优先的断点系统。未加前缀的工具类适用于所有屏幕尺寸，加断点前缀的工具类从该断点起向上生效。

<!-- Mobile: full width, Tablet+: half width, Desktop+: third width -->
<div class="w-full md:w-1/2 lg:w-1/3">
  Responsive width
</div>

默认断点

// tailwind.config.js default breakpoints
{
  sm: '640px',   // Small devices (landscape phones)
  md: '768px',   // Medium devices (tablets)
  lg: '1024px',  // Large devices (desktops)
  xl: '1280px',  // Extra large devices (large desktops)
  '2xl': '1536px' // 2X large devices (larger desktops)
}

最佳实践

从移动端起步，再向上扩展：先为移动端设计，再为更大屏幕添加复杂度。
使用响应式排版：让文本在不同设备上合理缩放。
响应式间距：针对不同屏幕调整内边距和外边距。
网格布局：创建能适应屏幕尺寸的响应式网格。
显示/隐藏元素：跨断点控制可见性。

文档为上述每条实践都给出了代码示例，包括响应式标题与正文、响应式内外边距与子元素间距、从 1 列到 4 列自适应的卡片网格、以及移动端菜单按钮与桌面导航的显隐切换。

使用方式与示例

文档提供了多组完整示例：

响应式首屏（Hero）：包含响应式最小高度、内边距、文字尺寸、按钮宽度，以及图文在移动端与桌面端的排列顺序切换。
响应式卡片网格：在移动、平板、桌面、大桌面分别呈现不同列数和间距。
响应式导航：桌面端水平导航，移动端显示菜单按钮与折叠菜单。

高级模式

容器查询（现代）：通过 @tailwindcss/container-queries 插件，用 @container 与 @sm:、@lg: 等前缀让组件响应容器而非视口。
自定义断点：在 tailwind.config.js 的 theme.screens 中新增项目专属断点，例如 xs、3xl，以及 max-width 断点 max-md 和基于高度的 tall（min-height: 800px）。
基于方向的样式：使用 portrait: 与 landscape: 前缀适配横竖屏。
打印样式：使用 print: 前缀控制在打印时的显示与隐藏。

常见模式

文档还展示了响应式图片尺寸与宽高比、响应式 Flexbox 方向与对齐、响应式排列顺序（order）等常见写法。

反模式

不要使用过多断点，应选择有策略的少量断点。
不要忽视移动用户，避免桌面优先思维。
不要到处使用任意断点，优先使用标准断点。

限制

关于该技能的收费、价格、平台支持范围与具体使用成效，资料中暂未提供。

技能介绍

用途