移动优先策略

移动优先把最少的布局和内容作为默认样式，再通过 min-width 媒体查询逐步增加空间。这样默认路径覆盖窄屏、旧浏览器和没有额外条件的环境，扩展规则只描述真正新增的能力。

.sidebar { display: none; }
.content { padding-inline: 1rem; }

@media (min-width: 48rem) {
  .sidebar { display: block; }
  .content { padding-inline: 2rem; }
}

移动优先不是“移动端功能少”，也不是把桌面版缩小。导航、表单和主要内容的优先级需要先确定，桌面空间增加后再决定哪些内容并列、展开或移动。CSS 改变视觉位置时，仍要检查 DOM 和键盘顺序。

实验与练习

为一个文章页先写单列默认布局，再增加侧栏和双列导航。用窄、中、宽三个视口检查内容顺序、焦点顺序和可读宽度；把一个只适合桌面的规则移回默认样式，说明为什么它会破坏小屏。

可运行微实验：主题闭环

从单列 DOM 开始，逐步增加侧栏；在 320px、768px、1440px 记录视觉顺序、Tab 顺序和内容可读宽度。把桌面规则误放回默认样式，写出小屏溢出的具体断言。

常见错误

• 先写复杂桌面布局，再用大量覆盖规则压回移动端。
• 只改变视觉顺序，却让键盘顺序与阅读顺序不一致。
• 把“隐藏”当成所有小屏内容策略。

继续阅读

固定断点之外，还需要流式尺寸，下一篇进入响应式单位：响应式单位。

练习

1. 用最小输入复现“移动优先策略”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案