✏️ AI 术语图鉴

响应式设计 · Responsive Design

英文:responsive design按单词直读

界面与交互难度:进阶 ★★

🗣️一句话大白话

同一个页面自动适配不同屏幕:桌面三列、平板两列、手机单列。不是「做个手机版网站」,而是同一套代码对宽度做出响应。不做响应式=一半用户被劝退。

🎬真实场景

你做的应用电脑上完美,老板用手机一开——横向滚动、按钮挤成一团。响应式断点(768px、375px)下重新排布,一套代码全端通用。

📮你可以这样说

「全站响应式:桌面三列、平板两列、手机单列;导航手机端折叠;点击目标手机上不小于 44px;图片按容器缩放不溢出。」

⚠️边界与常见误解

  • 手机优先设计通常效果更好:先满足最小屏,再往大扩
  • 「响应式」要真机验证:浏览器缩窗口不算数
  • 手机上没有悬停(hover):别把关键功能放在悬停里

🔗相关术语