响应式与自适应的区别

先理解这个概念

响应式让同一结构随空间连续变化；自适应在不同条件下切换结构或交互模式。真实产品常常组合两者。断点应该由内容拥挤的时刻决定，而不是只按“某型号手机”制定。

响应式通常通过连续伸缩、换行和列数变化适应空间，自适应则可能在条件改变时替换结构或交互方式。两者可以共同使用。判断条件不只是屏幕宽度，还包括输入方式、窗口大小与任务复杂度；同一台设备也可能在分屏与全屏之间切换。

记住这三个原则

1. 01

   优先基于可用窗口宽度，而不是设备名称。

2. 02

   检查内容顺序在每种布局中是否仍然合理。

3. 03

   区分视口断点与组件容器查询。

实际设计时，分三步做

1. STEP 01

   先找内容失效点，例如导航挤成两行、主列表无法比较、操作按钮被压缩，再决定结构变化。

2. STEP 02

   列出每次变化保留什么：当前对象、筛选、草稿和位置通常需要延续；辅助面板可以改变呈现方式。

3. STEP 03

   覆盖中间宽度、文字放大与窗口连续缩放。确保不是只在两个预设截图尺寸下成立。

一个容易理解的例子

适配的是任务和可用空间，不能仅缩放外观。

适用边界与取舍

隐藏不等于适配。若移动端删掉了必要字段或操作，必须提供合理替代入口；否则只是让页面更空，任务并没有完整保留。