同一个页面换设备,不能只缩小

将设计适配到不同的设备和平台。

adapt 用来把已有网页体验改造成另一种设备、屏幕、输入方式或使用场景。它强调适配不是把桌面像素等比例缩小,而是重新思考导航、内容优先级、触控和信息密度。

开始前先确认源环境和目标环境:桌面还是移动、鼠标还是触控、横屏还是竖屏、网络是否慢、用户是快速浏览还是专注阅读。移动端通常要单列、44px 以上触控目标、底部或抽屉式导航、渐进披露和更短文本;平板可以用主从布局;桌面再恢复并列信息。

不要依赖 hover 才能完成核心操作,也不要为了响应式把核心功能隐藏掉。用内容真正撑破的位置决定断点,配合 `clamp`、container query、safe-area 和 `picture/srcset`。最后在真实设备、不同方向、浏览器和输入方式上验证,尤其检查 320px 与 4K 等边界。

分类:设计创作

来源仓库:pbakaus/impeccable

适合用来做什么

  • 请帮我调整这个设计以适应移动设备。
  • 我们如何实现响应式设计以适应不同屏幕尺寸?

安装 adapt

npx skills add https://www.iskills.cc/skills/pbakaus/impeccable/adapt/SKILL.md

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

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

查看 adapt 的用途与原始说明

浏览全部 Skill 指南