min-width与max-width在@media query中的区别及选用建议

核心区别 #

• min-width：触发逻辑是「视口宽度≥设定值时生效」，属于向上适配——先定义小屏幕的基础样式，再为更大的屏幕补充/覆盖样式。简单说就是“从这个宽度开始，用这套样式”。
• max-width：触发逻辑是「视口宽度≤设定值时生效」，属于向下适配——先定义大屏幕的基础样式，再为更小的屏幕补充/覆盖样式。简单说就是“到这个宽度为止，用这套样式”。

直观代码示例 #

移动优先（用min-width） #

/* 默认：适配手机等小屏幕 */
.container {
  width: 90%;
  padding: 10px;
  background: #eee;
}

/* 屏幕≥768px（平板）时生效 */
@media (min-width: 768px) {
  .container {
    width: 80%;
    padding: 15px;
  }
}

/* 屏幕≥1200px（桌面）时生效 */
@media (min-width: 1200px) {
  .container {
    width: 1200px;
    padding: 20px;
    background: #fff;
  }
}

这种写法从小屏起步，大屏样式基于小屏扩展，冗余代码少，是当前响应式设计的主流。

桌面优先（用max-width） #

/* 默认：适配桌面大屏幕 */
.container {
  width: 1200px;
  padding: 20px;
  background: #fff;
}

/* 屏幕≤1199px（平板及以下）时生效 */
@media (max-width: 1199px) {
  .container {
    width: 80%;
    padding: 15px;
  }
}

/* 屏幕≤767px（手机）时生效 */
@media (max-width: 767px) {
  .container {
    width: 90%;
    padding: 10px;
    background: #eee;
  }
}

这种写法适合已有桌面端项目，后续要适配移动端的场景，不用推翻原有代码，只针对小屏做修改。

哪种更好？ #

没有绝对的最优解，完全看项目的适配策略：

• 如果是新项目，优先选min-width（移动优先）——现在移动设备用户占比更高，先保证小屏体验，再扩展大屏，代码更精简，也符合现代前端的设计趋势。
• 如果是已有桌面端项目要加移动端适配，选max-width（桌面优先）——可以基于原有桌面样式快速修改，减少重构成本。

为什么你没发现差异？ #

大概率是这两个原因：

1. 测试区间没踩中触发条件：比如你写了min-width: 768px，但测试时屏幕宽度一直小于768px，样式自然不会变化；或者max-width: 768px，但测试宽度一直大于768px。
2. 样式差异太细微：如果只是调整了字体大小、内边距这类不显眼的样式，肉眼很难快速分辨。可以把测试样式改成明显差异（比如不同的背景色），再调整屏幕宽度就能看到区别了。

内容的提问来源于stack exchange，提问作者GloryToPeePo