前端Wiki/CSS3/深入/媒体查询与响应式

移动优先策略

移动优先（Mobile First）是响应式的最佳实践：基础样式按手机编写，再用 min-width 逐级增强到平板、桌面。

写法上全部使用 min-width，条件从窄到宽排列，后面的规则自然覆盖前面的。
对比「桌面优先」（max-width 层层缩减）：移动优先的代码更少、层级更清晰，因为增强是「加法」，缩减是「减法」，加法不容易写出大量覆盖补丁。
对性能也有利：手机浏览器不必解析一堆为桌面准备的复杂规则。

常用断点参考（不必迷信具体数值）：600px 左右平板竖屏、900px 平板横屏/小桌面、1200px 大桌面。断点应该由内容撑破容器的时机决定，而不是照抄设备清单。

内容排布的套路：窄屏单列堆叠，宽屏用 grid/flex 改成多列——布局属性只出现在媒体查询里，其余样式全局共享。

本节要点先写手机样式，再用 min-width 逐级增强；断点看内容何时撑破，600/900/1200 仅供参考；窄屏单列、宽屏多列是基本套路。

CSS

<style>
  /* 基础：手机单列（不写媒体查询） */
  .grid {
    display: grid;
    gap: 10px;
  }
  .grid div { background: #b2ebf2; padding: 16px; }
  /* 平板：两列 */
  @media (min-width: 600px) {
    .grid { grid-template-columns: 1fr 1fr; }
  }
  /* 桌面：三列 */
  @media (min-width: 900px) {
    .grid { grid-template-columns: repeat(3, 1fr); }
  }
</style>
<div class="grid">
  <div>1</div><div>2</div><div>3</div>
</div>

🔗 相关词条flex grid 媒体查询浏览器

📚 推荐阅读

移动前端开发经验指南万象云档

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

Element Plus v2.2 组件库教程万象云档

ECharts 图表教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读