tailwind-responsive-ui

社区版响应式 UI Tailwind CSS 最佳实践

全面的 Tailwind CSS 应用响应式改造指南，基于 Adam Wathan 和 Steve Schoger 的《Refactoring UI》及现代响应式设计模式。包含 8 个类别中的 49 条规则，并按影响程度排序，为自动化重构和代码生成提供指导。

适用场景

在以下情况下参考这些指南：

• 让现有 UI 适配不同屏幕尺寸
• 使用 Tailwind CSS 构建新的响应式布局
• 为仅支持桌面端的界面添加移动端支持
• 检查响应式代码中的断点、间距和排版问题
• 调整导航、表单和数据表格以适配触控设备

按优先级划分的规则类别

优先级	类别	影响程度	前缀
1	断点策略	关键	bp-
2	布局转换	关键	layout-
3	响应式间距	高	rspac-
4	流式排版	高	fluid-
5	导航模式	中高	nav-
6	触控与交互	中	touch-
7	响应式媒体	中	rmedia-
8	数据适配	中低	data-

快速参考

1. 断点策略（关键）

• bp-mobile-first-default - 采用移动端优先的断点方向
• bp-content-driven-breakpoints - 在内容出现问题的位置设置断点
• bp-avoid-device-widths - 避免使用特定设备的断点值
• bp-consolidate-breakpoints - 将断点合并为三到四个
• bp-min-width-over-max - 断点优先使用 min-width，而非 max-width
• bp-debug-breakpoints - 开发期间使用可视化断点指示器

2. 布局转换（关键）

• layout-stack-to-row - 移动端纵向堆叠元素，桌面端改为横向排列
• layout-sidebar-collapse - 移动端将侧边栏收起到顶部或底部
• layout-grid-column-reduction - 在较窄的断点下减少网格列数
• layout-holy-grail-responsive - 使用 Grid 构建响应式圣杯布局
• layout-sticky-to-static - 移动端将粘性元素改为静态定位
• layout-fixed-to-relative - 移动端将固定定位改为相对定位
• layout-aspect-ratio-containers - 使用纵横比构建响应式容器

3. 响应式间距（高）

• rspac-scale-padding-per-bp - 为每个断点单独调整内边距
• rspac-responsive-gap - 使用响应式 gap 设置网格和 Flex 间距
• rspac-compact-mobile-generous-desktop - 移动端采用紧凑间距，桌面端采用宽松间距
• rspac-section-spacing - 根据视口调整分区分隔间距
• rspac-inline-to-stack-spacing - 移动端将行内间距改为纵向堆叠间距
• rspac-container-padding - 使用响应式容器内边距

4. 流式排版（高）

• fluid-clamp-font-size - 使用 clamp() 设置流式字号
• fluid-responsive-line-height - 随字号增大而缩小行高
• fluid-responsive-measure - 将行长限制在 45-75 个字符
• fluid-scale-headings-independently - 在不同断点独立调整标题字号
• fluid-responsive-letter-spacing - 为响应式标题调整字间距
• fluid-type-scale - 使用响应式字号比例

5. 导航模式（中高）

• nav-horizontal-to-hamburger - 在移动设备上将水平导航折叠为汉堡菜单
• nav-tab-bar-mobile - 使用底部标签栏作为移动设备的主要导航
• nav-breadcrumb-collapse - 在移动设备上截断面包屑导航
• nav-sidebar-drawer - 在移动设备上将侧边栏导航转换为画布外抽屉
• nav-dropdown-to-fullscreen - 在移动设备上将下拉菜单展开为全宽菜单
• nav-sticky-header-compact - 在移动设备上滚动时缩小页眉

6. 触摸与交互（中）

• touch-min-touch-target - 确保移动设备上的触摸目标至少为 44px
• touch-hover-to-tap - 将悬停交互替换为适合点击的替代方案
• touch-swipe-affordance - 为水平滚动添加滑动提示
• touch-scroll-snap-mobile - 使用滚动捕捉实现类似轮播的移动界面
• touch-input-sizing-mobile - 设置表单输入框大小，防止 iOS 缩放
• touch-focus-visible-touch - 使用 focus-visible 设置适合触摸操作的焦点样式

7. 响应式媒体（中）

• rmedia-responsive-images - 使用 Object-Fit 设置响应式图像尺寸
• rmedia-video-aspect-ratio - 在不同断点保持视频宽高比
• rmedia-icon-size-scaling - 按断点调整图标大小，而非随字号变化
• rmedia-avatar-responsive - 根据使用场景和断点调整头像大小
• rmedia-background-image-bp - 在不同断点切换背景图像
• rmedia-embed-responsive - 使用容器约束实现嵌入内容的响应式布局

8. 数据适配（低至中）

• data-table-to-cards - 在移动设备上将表格转换为卡片
• data-horizontal-scroll-table - 为密集数据表格启用水平滚动
• data-responsive-data-grid - 根据屏幕尺寸调整数据网格密度
• data-list-density-mobile - 提高移动设备上列表项的密度
• data-truncate-overflow - 在移动设备上截断溢出文本
• data-responsive-form-layout - 在移动设备上堆叠表单字段，在桌面设备上使用网格布局

使用方法

阅读各个参考文件，了解详细说明和代码示例：

• 章节定义 - 分类结构和影响级别
• 规则模板 - 用于添加新规则的模板

参考文件

文件	描述
references/_sections.md	类别定义和排序
assets/templates/_template.md	新规则模板
metadata.json	版本和参考信息