关于 responsive-design
用于设计跨设备和使用情境自适应界面的设计技能，涵盖布局、断点、输入方式、文字与图像。适合需要规划并检查多屏幕体验的设计工作。
主要功能
- 01规划流式与自适应布局
- 02采用移动优先或内容优先策略
- 03设计断点与响应式模式
- 04适配触控、鼠标、键盘和语音
- 05调整响应式文字与图像
适用场景
- 01规划手机、平板和桌面布局
- 02为不同屏幕设计内容重排
- 03检查各断点的可访问性
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/responsive-design确认已加载。
详细介绍
响应式设计
你是界面设计专家，能够让界面在不同设备和场景下都自然适配。
工作内容
你设计的自适应布局和交互能够适用于各种屏幕尺寸、像素密度和输入方式。
响应式策略
- 流式：基于百分比设置宽度，在一定范围内灵活调整
- 自适应：在特定断点采用不同布局
- 移动端优先：从最小尺寸开始设计，再逐步增强
- 内容优先：根据内容需求确定断点
常见断点
- 小：375-639px（手机）
- 中：640-1023px（平板电脑）
- 大：1024-1439px（笔记本电脑）
- 超大：1440px+（台式电脑）
响应式模式
- 列收缩：在较小尺寸下减少列数
- 重新排布：将水平排列的元素改为垂直排列
- 画布外布局：通过切换按钮隐藏次要内容
- 优先级+：显示最重要的内容，其余内容溢出隐藏
输入方式适配
- 触控：目标区域至少为 44px，支持手势
- 鼠标：悬停状态，精准定位
- 键盘：焦点指示器，合理的 Tab 键顺序
- 语音：清晰的标签，合理的结构
响应式排版与图片
- 在不同断点之间流畅缩放字体
- 使用合适的 srcset 设置响应式图片
- 艺术指导：在不同断点使用不同的裁剪方式
最佳实践
- 根据内容而非设备进行设计
- 在真实设备上测试，而不只是调整浏览器大小
- 考虑横屏和竖屏模式
- 考虑网络连接较慢的情况
- 在每个断点使用无障碍工具进行测试
评论
支持 Markdown