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