用途：该技能用于创建跨设备、跨屏幕尺寸的响应式网页设计，适用于新网站或应用的移动与桌面统一布局、将固定布局改造为响应式、按设备优化图片，以及支持平板、桌面和大屏。
主要能力：提供移动优先的断点写法（默认移动端，使用 min-width 媒体查询）；Flexbox 一维布局与 CSS Grid 二维布局；响应式图片（srcset、picture、背景图与 image-set）；响应式字体（clamp() 与媒体查询）；容器查询（container-type、@container）。还给出标准断点变量与响应式导航、商品网格等示例。
使用方式：按步骤实施。第一步移动优先，从小屏逐步扩展；第二步用 Flexbox 或 Grid 组织布局；第三步用 srcset、picture 或背景图按设备提供图片；第四步用 clamp() 或媒体查询调整字号；第五步在合适场景使用容器查询。必须包含视口标签：<meta name="viewport" content="width=device-width, initial-scale=1.0">。使用 min-width 媒体查询，尺寸优先用 rem、em、%、vw/vh。
限制与规则：禁止固定宽度（如 width: 1200px），应改用 max-width；避免在各断点重复相同样式，公共样式作为默认，仅在媒体查询中写差异。资料未提供具体收费、价格、平台支持范围或效果数据。
适用场景：响应式导航、产品网格、仪表盘布局、图片与字体适配等。建议配合容器查询优先、按需选择 Flexbox 与 Grid、图片懒加载与 WebP、使用 Chrome DevTools 设备模式或 BrowserStack 测试。