用途概括使用容器查询、流式排版、CSS Grid 与移动优先断点实现现代响应式布局。提供适配界面的模式、最佳实践与参考文档。价值：跨设备无缝 UI，减少溢出与触控目标问题。
业务领域
Design
技能形态
Style Guide
业务领域
技能形态
技能解析
剖析技能的工作原理和产出物，快速判断你的场景与价值。
构建自适应界面、实现流式布局或创建组件级响应式行为并运用现代 CSS 时。
一份使用容器查询、流式比例与 Grid 的响应式 UI 实现方案，可跨设备适配并减少布局缺陷。
使用场景
前端开发者构建组件库，需要卡片在侧边栏与主内容区宽度下自适应。使用该技能的容器查询模式与参考文档，实现组件级响应式而无需设备断点，交付可在任意布局上下文正确重排的库，减少 QA 修复。
产品团队上线的营销站点在移动端频繁横向溢出。应用移动优先与流式排版指引，将固定 px 宽度替换为相对单位与流式比例，消除溢出并提升移动可读性与转化。
技能关系
依赖关系读作「上一格指向下一格」。当前 Skill 位于第二格，上下分别是影响它与被它影响的 Skill。
第一层 · 这些 Skills 用了我
第二层 · 当前 Skill
第三层 · 我用了这些 Skills
在所属技能集的全局上下文中浏览当前 Skill 的关系。点击节点切换右侧详情,搜索框可快速定位技能。
技能文件