适配多屏用这Skill核输入方式

设计自适应各种屏幕尺寸的界面布局。

responsive-design 是让布局和操作适应不同屏幕与输入方式的 Skill。它按内容选择断点,再核触摸、鼠标、键盘和不同方向下的使用路径。

浏览器变窄只是一个场景。小屏也可能接键盘,大屏也可能触摸;不能只看宽度就决定是否提供悬停内容或焦点反馈。

原文给常见尺寸和44像素触摸目标作参考,不是全部设备或合规条件的统一结论。列数下降、次要内容收起之后,还要核内容没有丢,隐藏控制可被发现和使用。

适合一套界面服务多个使用环境的项目。本文未测试设备;横竖屏、缩放、慢网络和辅助技术都应按任务核。响应式图片也不只换分辨率,必要裁切要保留重要内容,尺寸适配不等于整个任务可完成。

分类:设计创作

来源仓库:owl-listener/designer-skills

适合用来做什么

  • 设计一个适应不同屏幕尺寸的布局。
  • 如何使用单一设计服务于多个视口?

安装 responsive-design

npx skills add https://www.iskills.cc/skills/owl-listener/designer-skills/responsive-design/SKILL.md

在本机终端执行安装命令。安装前请阅读原始说明,确认所需工具、账号和权限。

查看安装步骤 · 查看常见问题

查看 responsive-design 的用途与原始说明

浏览全部 Skill 指南