先记住这个答案
媒体查询用 @media 包住一组 CSS 规则，括号内写媒体特征，例如 (min-width: 48rem)。条件匹配时，这组规则才参与样式计算。移动优先通常先写窄屏默认样式，再用 min-width 为较宽视口逐步增强；桌面优先则常用 max-width 向窄屏覆盖。选择哪种不取决于手机还是电脑，而取决于哪套布局更适合作为基础。
@media后的条件决定规则何时生效- 移动优先：默认窄屏，逐步加
min-width - 桌面优先：默认宽屏，逐步加
max-width - 断点按内容需要选，不按设备名称背
从单列卡片改成双列
内容先在窄屏排成一列，确保小视口里文字有空间。视口足够宽后，再改为两列。这里断点应来自卡片放在两列时是否仍有足够宽度，而不是盲目照搬某款设备的像素宽。
.cards {
display: grid;
grid-template-columns: 1fr; /* 窄屏默认 */
gap: 1rem;
}
@media (min-width: 48rem) {
.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}min-width 的判断包含边界值。视口宽度达到 48rem 时，上面的双列规则开始匹配；低于它时，只保留默认单列。若根元素字号变化，rem 对应的实际像素阈值也会变化。调试时用开发者工具拖动视口，重点看内容刚好容不下两列的附近，而不只是看预设的手机型号。
max-width 什么时候更顺手
已有桌面页面改造手机端时，可能先保留宽屏默认布局，再在窄屏用 @media (max-width: 48rem) 改成单列。这就是桌面优先的覆盖方向。它不是语法错误，也不等于一定性能差；问题通常出在团队同时使用两套方向，导致断点附近多条规则互相覆盖，难以判断哪条最终生效。
如果同一元素在一个文件里既有 min-width 又有 max-width，先画出每个条件的匹配区间。两条规则可能在同一个宽度同时命中；媒体查询不会给其中一条自动增加优先级。选择器权重相同时，后出现的声明会赢。移动优先的意义更多是把最基础的布局留在无条件规则里，逐步添加空间允许的增强。
条件里还能写什么
媒体查询不仅能判断宽度，还能结合媒体类型、用户偏好和屏幕方向。多个条件用 and 连接时须同时满足；用逗号分隔时，只要其中一个查询匹配即可。常见的 screen 并非“所有有屏幕的场景都必须显式写”，只判断视口宽度时，直接写 @media (min-width: ...) 就够了。
现在还可以使用范围语法，例如 @media (width >= 48rem)；它与对应的最小宽度判断表达同一个边界。项目里沿用哪一种，要考虑团队的浏览器支持范围和现有代码风格。对于面试回答，先把经典的 min-width 与 max-width 讲准确，再提范围语法即可。
容易答错的地方
- 以为媒体查询命中就一定覆盖默认样式
- 命中只表示规则参与级联。若默认规则选择器权重更高，或者后面还有同样命中的规则，结果可能不是你刚写的值。排查时同时看匹配条件、权重与样式表顺序。
- 把断点等同于设备型号
- 设备宽度和浏览器视口并不总相同，分屏、缩放和嵌入式容器也会改变可用空间。断点应服务于内容：布局在某个宽度开始挤压、换行难看时，再增加对应的切换规则。
面试官还会怎么问？
min-width: 48rem 在刚好 48rem 时生效吗？
生效。min-width 是“大于或等于”，max-width 是“小于或等于”。如果一套规则写 max-width: 48rem，另一套写 min-width: 48rem，边界点两条都会匹配，还需按级联规则决定结果。
@media screen and (min-width: 48rem) 与只写宽度有什么区别？
前者还限制媒体类型为 screen；后者不加这一层类型条件。多数普通响应式页面只需按视口宽度调整，不必每次都写 screen。
为什么移动优先常用 min-width？
因为默认规则先保证小空间可用，宽度增加后再添加列数、留白等增强。这样新增一个更宽断点时，思路沿着视口变大的方向走；但已有桌面页面并非必须为了遵循名称而全部重写。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。