responsive-patterns

响应式模式

适用于 React 应用的现代响应式设计模式，采用容器查询、流式排版和移动优先策略（2026 年最佳实践）。

概述

• 构建可根据其容器自适应的可复用组件
• 实现平滑缩放的流式排版
• 创建无需过多媒体查询的响应式布局
• 为多种使用场景构建设计系统组件
• 针对可变容器尺寸（侧边栏、模态框、网格）进行优化

核心概念

容器查询与媒体查询

特性	媒体查询	容器查询
响应于	视口尺寸	容器尺寸
组件复用	依赖上下文	真正可移植
浏览器支持	通用	2023 年起成为基线
使用场景	页面布局	组件布局

现代 CSS 布局

加载 Read("rules/css-subgrid.md")，了解 CSS Subgrid 模式：嵌套网格对齐、标题／内容／操作项对齐的卡片布局，以及二维 Subgrid。

加载 Read("rules/css-intrinsic-responsive.md")，了解内在响应式布局：auto-fit/minmax 网格、使用 clamp() 实现全面流式布局、用于组件逻辑的容器查询，以及零媒体查询模式。

加载 Read("rules/responsive-foldables.md")，了解可折叠／多屏设备支持：env(safe-area-inset-*)、视口分段查询、双屏布局和渐进增强。

涵盖的关键模式： CSS Subgrid 对齐、内在响应式网格（auto-fit + minmax）、流式 clamp() 比例、可折叠设备布局、安全区域内边距、视口分段查询。

CSS 模式

加载 Read("rules/css-patterns.md")，查看完整的 CSS 示例：容器查询、cqi/cqb 单位、使用 clamp() 实现流式排版、移动优先断点、CSS Grid 模式和滚动查询。

涵盖的关键模式： 容器查询基础、容器查询单位（cqi/cqb）、使用 clamp() 实现流式排版、基于容器的流式排版、移动优先断点、CSS Grid 响应式模式、容器滚动查询（Chrome 126+）。

React 模式

加载 Read("rules/react-patterns.md")，查看完整的 React 示例：ResponsiveCard 组件、Tailwind 容器查询、useContainerQuery Hook 和响应式图片。

涵盖的关键模式： 使用容器查询实现响应式组件、Tailwind CSS 容器查询、useContainerQuery Hook、响应式图片模式。

无障碍注意事项

/* IMPORTANT: Always include rem in fluid typography */
/* This ensures user font preferences are respected */

/* ❌ WRONG: Viewport-only ignores user preferences */
font-size: 5vw;

/* ✅ CORRECT: Include rem to respect user settings */
font-size: clamp(1rem, 0.5rem + 2vw, 2rem);

/* User zooming must still work */
@media (min-width: 768px) {
  /* Use em/rem, not px, for breakpoints in ideal world */
  /* (browsers still use px, but consider user zoom) */
}

反模式（禁止）

/* ❌ NEVER: Use only viewport units for text */
.title {
  font-size: 5vw; /* Ignores user font preferences! */
}

/* ❌ NEVER: Use cqw/cqh (use cqi/cqb instead) */
.card {
  padding: 5cqw; /* cqw = container width, not logical */
}
/* ✅ CORRECT: Use logical units */
.card {
  padding: 5cqi; /* Container inline = logical direction */
}

/* ❌ NEVER: Container queries without container-type */
@container (min-width: 400px) {
  /* Won't work without container-type on parent! */
}

/* ❌ NEVER: Desktop-first media queries */
.element {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) {
  .element {
    grid-template-columns: 1fr; /* Overriding = more CSS */
  }
}

/* ❌ NEVER: Fixed pixel breakpoints for text */
@media (min-width: 768px) {
  body { font-size: 18px; } /* Use rem! */
}

/* ❌ NEVER: Over-nesting container queries */
@container a {
  @container b {
    @container c {
      /* Too complex, reconsider architecture */
    }
  }
}

浏览器支持

特性	Chrome	Safari	Firefox	Edge
容器尺寸查询	105+	16+	110+	105+
容器样式查询	111+	❌	❌	111+
容器滚动状态	126+	❌	❌	126+
cqi/cqb 单位	105+	16+	110+	105+
clamp()	79+	13.1+	75+	79+
Subgrid	117+	16+	71+	117+

规则

每个类别都有单独的规则文件，按需从 rules/ 加载：

类别	规则	影响	关键模式
现代 CSS 布局	rules/css-subgrid.md	高	用于嵌套网格对齐和卡片布局的 CSS Subgrid
现代 CSS 布局	rules/css-intrinsic-responsive.md	高	固有响应式布局、auto-fit/minmax、clamp()、零断点
现代 CSS 布局	rules/responsive-foldables.md	中	折叠设备、安全区域内边距、视口片段
CSS	rules/css-patterns.md	高	容器查询、cqi/cqb、流式排版、网格、滚动查询
React	rules/react-patterns.md	高	容器查询组件、Tailwind、useContainerQuery、响应式图像
PWA	rules/pwa-service-worker.md	高	Workbox 缓存策略、VitePWA、更新管理
PWA	rules/pwa-offline.md	高	离线钩子、后台同步、安装提示
动画	rules/animation-motion.md	高	Motion 预设、AnimatePresence、View Transitions
动画	rules/animation-scroll.md	中	CSS 滚动驱动动画、视差、渐进增强
触控与移动设备	rules/touch-interaction.md	高	触控目标（最小 44px）、拇指操作区、双指缩放、安全区域、手势

总计：6 个类别，共 10 条规则

关键决策

决策	选项 A	选项 B	建议
查询类型	媒体查询	容器查询	组件使用 容器查询，布局使用 媒体查询
容器单位	cqw/cqh	cqi/cqb	cqi/cqb（逻辑单位，适用于国际化）
流式字体基准	仅 vw	rem + vw	rem + vw（无障碍）
移动优先	是	桌面优先	移动优先（CSS 更少，渐进增强）
网格模式	auto-fit	auto-fill	卡片使用 auto-fit，图标使用 auto-fill

相关技能

• design-system-starter - 构建响应式设计系统
• ork:performance - CLS、响应式图像和图像优化
• ork:i18n-date-patterns - RTL/LTR 响应式注意事项

功能详情

container-queries

关键词：@container、container-type、inline-size、container-name 解决问题：组件级响应式设计

fluid-typography

关键词：clamp()、流式、vw、rem、缩放、排版 解决问题：无需断点即可平滑缩放字体

responsive-images

关键词：srcset、sizes、picture、艺术指导 解决问题：适用于不同视口的响应式图像

mobile-first-strategy

关键词：min-width、移动设备、渐进式、断点 解决问题：高效的响应式 CSS 架构

grid-flexbox-patterns

关键词：auto-fit、auto-fill、subgrid、minmax 解决问题：响应式网格和弹性盒布局

container-units

关键词：cqi、cqb、容器宽度、容器高度 解决问题：相对于容器尺寸设置大小

参考资料

使用 Read("references/<file>") 按需加载：

文件	内容
container-queries.md	容器查询模式
fluid-typography.md	无障碍流式字体比例