先记住这个答案
移动优先是一种组织 CSS 覆盖关系的方法：窄屏样式先作为默认值，空间变宽时再用 min-width 增强。它能让基础内容先可用，但不要求每个产品都先画手机稿。决定起点时看主要用户任务与组件在最受限宽度下能否完成，再让断点跟实际内容拥挤点走。
- 窄屏基础样式先满足核心任务
- 宽屏可用
min-width增强 - 移动优先不是固定开发顺序
- 断点选内容开始拥挤的位置
商品详情从单列增强到双列
商品详情页先让图片、标题和购买按钮纵向排列，保证手机上阅读顺序清楚。到较宽视口时，再把图片和信息区改成两列。这样基础样式不用先写桌面两列，再在多个窄屏断点撤销。相反，一个数据密集型监控大屏若没有实际手机使用场景，强行从 320 像素开始设计可能让信息结构反而变差。关键是以内容断裂点与用户任务决定布局。
.product { display: grid; gap: 16px; }
@media (min-width: 48rem) {
.product {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
/* 宽屏才加两列，窄屏保持自然纵向 */
}所谓“移动优先”主要是内容优先和渐进增强的设计策略，代码上常表现为基础规则加 min-width 断点。
示例里的默认 .product 只定义网格和间距，单列时每项自然占满一行；达到 48rem 才明确指定两列。这样的写法让基础样式即使媒体查询未识别也保持可读。若桌面版还有图片左右交错、侧栏或复杂排序，可以把它们放进宽屏增强中；不要一开始就给窄屏写大量“撤销桌面样式”的覆盖。
断点应跟着内容而非设备型号
CSS 级联不会因为用了 min-width 就自动更快；重要的是减少互相覆盖的规则，并让默认布局满足最受约束的场景。断点应在内容不能正常排布的位置出现，不必死守某款设备宽度。还应同时考虑键盘、横屏、放大字体和不同容器宽度。
断点应由内容决定：商品卡在 680px 时标题和按钮开始互相挤压，就在那里从单列切换，而不是因为某款平板宽度恰好是 768px 才添加规则。逐步拉宽、拉窄视口检查临界区域，还要在浏览器字体放大后再看一次；文字长度和用户字号改变时，原先的设备表很快就不够用了。
容易答错的地方
- 把移动优先当成必须先画手机稿
- 先从受约束场景和核心任务考虑即可，实际开发顺序可随产品主要使用环境调整。
- 把固定设备宽度当成断点标准
- 内容何时开始拥挤更有参考价值，设备型号和尺寸会变化。
面试官还会怎么问？
为什么常用 min-width？
窄屏基础样式先成立，达到更宽阈值时再逐步增强布局，覆盖关系通常较直观。
桌面优先一定更差吗？
不一定。若主要用户在宽屏完成复杂任务，先确立宽屏信息结构有现实依据，但窄屏体验仍需设计。
容器查询与移动优先冲突吗？
不冲突。组件自身宽度可能比视口更能决定它何时切换布局，策略仍可从窄容器开始增强。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。