响应式设计Responsive Design

你可能会说

手机宽度下把三列改成一列，桌面的导航和卡片布局保持不变。

响应式设计是让同一界面根据可用空间和设备能力调整布局与交互的设计方法。例如 1440px 宽度显示三列卡片和完整导航，390px 宽度改为一列、放大触控目标并折叠次要导航。断点和媒体查询是常见实现手段；目标不是把桌面页面等比例缩小，而是让任务仍可读、可点、可完成。

先知道

也常被叫作响应式网页设计自适应设计Responsive Web Design

同一份内容在 1440px 和 390px 怎样重排

1440 px

VibeHub

课程 1

课程 2

课程 3

响应式设计怎样保留任务

先看空间和操作方式：窄屏不只是更小：文字行长、触控目标、侧边栏和表格都可能需要重排，优先保留用户完成当前任务所需的信息和操作。

用规则切换布局：断点是在某个条件下切换规则的阈值，媒体查询是 CSS 表达这些条件的方式。例如把下面规则粘贴到项目 CSS：@media (max-width: 720px) { .cards { grid-template-columns: 1fr; } }。

选择题选择一个你认为最合适的答案

桌面三列商品卡在 390px 手机上文字挤压、按钮太小。首先应提出什么改动？

在手机宽度下改为单列或更少列，并检查标题、价格和按钮是否仍可读可点把整个桌面页面按比例缩小，三列必须原样保留隐藏标题和购买按钮，只留下图片以避免拥挤

请在项目 CSS 中为卡片区加入 `@media (max-width: 720px)`：手机改为单列，桌面保持现有三列。改完后检查 390px 和 1440px，确认标题、价格、按钮和长文本都没有挤压或横向溢出。

接下来学什么