关于 responsive-design
面向界面设计与开发的技能，介绍如何让界面适应不同屏幕尺寸和设备情境，涵盖移动优先布局、CSS 响应式技术及常见问题。
主要功能
- 01移动优先布局指导
- 02容器查询模式
- 03流式字体与间距
- 04CSS Grid 和 Flexbox 布局
- 05响应式媒体与导航
适用场景
- 01构建适配手机与桌面的布局
- 02根据内容选择断点
- 03使用容器查询适配组件
- 04排查溢出和触控目标问题
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/responsive-design确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
references/breakpoint-strategies.mdcontainer-queries.mddetails.mdfluid-layouts.md详细介绍
响应式设计
掌握现代响应式设计技术，打造能够在各种屏幕尺寸和设备环境中无缝适配的界面。
何时使用本技能
- 实现移动优先的响应式布局
- 使用容器查询实现基于组件的响应式
- 创建流式排版和间距比例
- 使用 CSS Grid 和 Flexbox 构建复杂布局
- 为设计系统设计断点策略
- 实现响应式图片和媒体
- 创建自适应导航模式
- 构建响应式表格和数据展示
详细模式与完整示例
详细的模式文档位于 references/details.md。当上述导航层级不够用时，请阅读该文件。
最佳实践
- 移动优先：从移动端样式开始，再为更大屏幕增强
- 内容断点：根据内容而非设备设置断点
- 流式优于固定：排版和间距使用流式值
- 容器查询：用于组件级响应式
- 在真实设备上测试：模拟器无法发现所有问题
- 性能：优化图片，对屏幕外内容进行懒加载
- 触摸目标：在移动端保持最小 44x44px
- 逻辑属性：使用 inline/block 以适应国际化
常见问题
- 水平溢出：内容超出视口
- 固定宽度：使用 px 而非相对单位
- 视口高度：移动端浏览器上的 100vh 问题
- 字号：移动端文字过小
- 触摸目标：按钮过小，难以准确点击
- 宽高比：图片被压扁或拉伸
- Z-Index 堆叠：遮罩层在不同屏幕上出现异常
评论
支持 Markdown