responsive-patterns - 使用容器查询的 React 响应式设计
为 React 应用提供使用容器查询、流体排版和移动优先策略的现代响应式设计模式
标签
更新于: 2026-05-11能力
典型输入
典型输出
该技能可以做什么
- 创建容器查询组件
- 实现流体排版
- 构建响应式布局
- 应用移动优先模式
- 使用 CSS 子网格
- 优化可折叠设备
- 处理安全区域内边距
- 创建内在布局
输入
- React 应用程序
- CSS 代码库
- 组件需求
- 布局规范
输出
- 响应式组件
- CSS 样式表
- 容器查询代码
- 流体排版规则
要求
- Claude Code 2.1.76+
- 现代浏览器支持
- React 环境