用途：这是一个响应式子技能，可并入任何需要跨设备支持的设计或构建流程，用于新建移动端与桌面端通用的页面或组件、修复响应式布局问题、把固定宽度设计改为响应式、为新项目建立断点系统，以及针对多视口优化图片与排版。
主要能力：提供默认断点系统（sm 640px、md 768px、lg 1024px、xl 1280px、2xl 1536px，对应 Tailwind 的 sm:、md:、lg:、xl:、2xl:）；移动优先写法；Flexbox 一维布局与 CSS Grid 二维布局模式（含 auto-fit 自适应网格、带侧栏的仪表盘布局）；响应式图片（srcset、sizes、picture 艺术指导、loading="lazy"、WebP/AVIF）；用 clamp() 实现流体排版；容器查询实现组件级响应；常见模式如元素显隐、响应式间距、表格转卡片。
使用方式：以移动优先（min-width）媒体查询编写基础样式并逐级增强；HTML 必须包含 viewport meta 标签；布局宽度使用相对单位（rem、em、%、vw、vh），用 max-width 而非固定 width；交互元素触控目标至少 44px；在 320、768、1024、1280、1536 等断点测试，确保无横向滚动条、图片不溢出、正文不小于 16px。Tailwind 项目可直接使用响应式前缀。
适用场景：导航栏、按钮组、工具栏、卡片网格、图库、产品列表、带侧栏的整页布局、复杂二维仪表盘，以及需要随容器而非视口自适应的可复用组件。
限制：资料未提供该技能的安装命令、收费方式、平台支持与效果数据；容器查询需现代浏览器支持；具体项目若已有断点规范，应以其为准。