移动优先写法
移动优先（Mobile First）指默认样式面向手机，然后用 min-width 逐级增强。这与“默认桌面、max-width 逐步降级”相反。移动优先的 CSS 天然分层：基础样式最简，每加一个断点只是“增强”，浏览器加载的代码也更精简。
推荐写法：基础规则写小屏样式；所有媒体查询都用 min-width 从小到大排列。
- 默认样式 = 最小屏，min-width 逐级增强
- 样式是单向叠加的，不会互相打架
- 对性能也友好：手机只加载基础规则就够渲染
CSS
/* 移动优先：先写手机，再增强 */ .nav { display: flex; flex-direction: column; } /* 手机：竖排 */ .nav .item { padding: 12px; } @media (min-width: 768px) { .nav { flex-direction: row; } /* 增强：变横排 */ .nav .item { padding: 8px 16px; } } /* 反面：桌面优先要覆盖默认值，容易产生冲突 */ .nav { display: flex; flex-direction: row; } @media (max-width: 767px) { .nav { flex-direction: column; } /* 覆盖默认，写多了就乱 */ }
本节要点移动优先 = 默认小屏 + min-width 增强；覆盖少、分层清晰、性能更好。
