用途
该技能用于指导移动优先的响应式设计实现，帮助开发者构建在不同设备尺寸下都能良好工作的自适应界面。适用场景包括：设计并实现移动优先的响应式布局、创建流式自适应界面、使用现代 CSS 布局技术（Flexbox、Grid）、针对不同屏幕尺寸优化图片与媒体、构建无障碍且适合触控的界面、实现响应式排版与间距系统、创建基于容器的响应式组件、优化移动端性能、实现响应式导航模式、设计响应式表单与数据表格、创建自适应卡片布局与画廊、构建响应式仪表盘与管理界面。
主要能力
移动优先与断点策略
移动优先意味着从移动端布局开始，再逐步增强到更大屏幕。资料给出的理由包括：强制聚焦核心内容与功能、向上扩展比向下缩减更容易、移动设备性能更好、符合现代使用模式、CSS 更简单且覆盖更少。
标准断点基于常见设备尺寸：默认（移动端）、480px（大屏手机）、768px（平板）、1024px（桌面）、1280px（宽桌面）、1536px（超宽屏）。资料也建议使用基于内容而非设备的自定义断点，例如 40em（640px）、60em（960px）、75em（1200px）。
流式布局
通过容器约束、流式网格与流式排版实现平滑适配。示例包括使用 clamp() 控制内边距、使用 repeat(auto-fit, minmax(250px, 1fr)) 创建自适应网格、使用 clamp(1.5rem, 4vw + 1rem, 3rem) 实现流式标题字号。
CSS 技术
Flexbox 适用于一维布局（行或列），示例包括响应式导航、灵活卡片布局、响应式侧边栏布局。Grid 适用于二维布局，示例包括自动响应式网格、命名网格区域、精确控制的响应式画廊。
媒体查询进阶
涵盖基于方向的查询（portrait/landscape）、悬停能力检测（hover/pointer）、减少动态效果偏好（prefers-reduced-motion）、颜色方案偏好（prefers-color-scheme）、组合媒体查询、打印样式。
容器查询
作为基于视口媒体查询的现代替代方案，通过 container-type 与 container-name 定义容器，再使用 @container 根据容器尺寸调整样式，示例包括卡片布局与多容器场景。
响应式图片
涵盖 srcset 与 sizes 提供不同尺寸图片、picture 元素实现艺术方向与格式回退（WebP/JPEG）、响应式背景图片、高密度屏幕适配。
视口单位
涵盖 vw、vh、vmin、vmax 以及动态视口单位 dvh、svh、lvh，并给出实际应用示例，如自适应 hero 区域、响应式间距系统、基于视口的卡片网格间距。
现代 CSS 函数
涵盖 clamp() 用于流式尺寸、min() 与 max() 用于约束、aspect-ratio 用于宽高比控制，并包含响应式宽高比与 object-fit 配合的示例。
性能优化
涵盖关键 CSS 内联、异步加载完整 CSS、图片与 iframe 懒加载、模糊占位效果、CSS containment、动画优化、content-visibility 等实践。
无障碍
涵盖触控目标最小尺寸 44x44px（WCAG）、触控设备上的间距调整、可读文本行宽（45-75 字符）、最小字号、颜色对比度、可缩放间距、焦点指示器。
使用方式
该技能以代码示例与说明形式提供，开发者可直接参考其中的 CSS 与 HTML 片段，将其应用到自己的项目中。资料未提供安装命令或特定工具链的集成步骤。
适用场景
适用于需要构建跨设备自适应界面的前端开发工作，包括响应式网站、管理后台、仪表盘、画廊、表单与数据表格等。
限制
资料未提供关于收费、价格、平台支持范围或具体效果保证的信息。部分内容（如焦点指示器）在资料中未完整展开。