adapt 用来把已有网页体验改造成另一种设备、屏幕、输入方式或使用场景。它强调适配不是把桌面像素等比例缩小,而是重新思考导航、内容优先级、触控和信息密度。
开始前先确认源环境和目标环境:桌面还是移动、鼠标还是触控、横屏还是竖屏、网络是否慢、用户是快速浏览还是专注阅读。移动端通常要单列、44px 以上触控目标、底部或抽屉式导航、渐进披露和更短文本;平板可以用主从布局;桌面再恢复并列信息。
不要依赖 hover 才能完成核心操作,也不要为了响应式把核心功能隐藏掉。用内容真正撑破的位置决定断点,配合 `clamp`、container query、safe-area 和 `picture/srcset`。最后在真实设备、不同方向、浏览器和输入方式上验证,尤其检查 320px 与 4K 等边界。