用途：用现代 CSS 特性与 Tailwind CSS 构建自适应、移动优先的界面布局，形成一套可复用的响应式设计系统。
主要能力：1) 断点系统，支持 Tailwind 默认断点（sm 640px、md 768px、lg 1024px、xl 1280px、2xl 1536px）与自定义断点，含 max-width、区间断点及 hover/pointer 特性查询。2) 流式排版，使用 clamp() 定义字号与间距比例，并注册为 Tailwind fontSize 与 spacing 扩展。3) 容器查询，通过 @container 与 @md/@lg 等前缀实现组件级响应，支持命名容器。4) 响应式栅格与布局，含 auto-fit 栅格、仪表盘布局与 Holy Grail 布局。5) 响应式图片，使用 srcset、sizes、picture 艺术方向及 Next.js Image。6) 响应式导航（移动端菜单）、响应式表格（横向滚动或移动端堆叠）、触控目标（最小 44x44px）与流式间距。7) 测试清单，覆盖 320px 至 2560px 视口、方向与交互测试。
使用方式：在 tailwind.config.js 的 theme.extend 中扩展 screens、fontSize、spacing、containers；在全局 CSS 中定义 clamp 变量；在组件中组合断点前缀类与容器查询前缀类；图片使用 srcset 与 sizes。
适用场景：需要多设备适配的网页与应用界面、组件库响应式改造、仪表盘与卡片布局。
限制：内容假定使用 Tailwind CSS；具体项目配置、浏览器兼容范围与性能基线暂未提供；实际效果需在真实设备上验证。