响应式设计（Responsive Design）是一套用于设计可在各种设备与使用情境下优雅适配界面的技能。
用途 该技能面向需要在所有屏幕尺寸、像素密度与输入方式下工作的自适应布局与交互设计。
响应式策略
- 流式（Fluid）：基于百分比的宽度，在一定范围内灵活伸缩。
- 自适应（Adaptive）：在特定断点处切换为不同的布局。
- 移动优先（Mobile-first）：从最小屏幕开始设计，再向上增强。
- 内容优先（Content-first）：让内容需求驱动断点的设置。
常见断点
- 小屏：375-639px（手机）
- 中屏：640-1023px（平板）
- 大屏：1024-1439px（笔记本电脑）
- 超大屏：1440px 及以上（桌面设备）
响应式模式
- 列下沉（Column drop）：在较小尺寸下减少列数。
- 重排（Reflow）：将水平排列的元素改为垂直堆叠。
- 画布外（Off-canvas）：将次要内容隐藏在切换按钮之后。
- 优先级+（Priority+）：展示最重要的内容，其余内容收纳溢出。
输入方式适配
- 触摸：最小 44px 的触控目标，支持手势。
- 鼠标：悬停状态，精确定位。
- 键盘：焦点指示器，符合逻辑的 Tab 顺序。
- 语音：清晰的标签，符合逻辑的结构。
响应式排版与图片
- 断点之间的流式字体缩放。
- 使用恰当 srcset 的响应式图片。
- 艺术指导（Art direction）：针对不同断点采用不同裁剪。
最佳实践
- 为内容而设计，而非为设备而设计。
- 在真实设备上测试，而不仅仅依赖浏览器缩放。
- 同时考虑横屏与竖屏。
- 考虑慢速网络连接的情况。
- 在每个断点使用无障碍工具进行测试。
适用场景与限制 该技能适用于网页及各类应用界面的跨设备适配设计。关于其具体的收费方式、价格、平台支持范围与实施步骤，资料暂未提供。