Webpack项目中SCSS最小媒体查询不生效问题求助

你的问题核心在于媒体查询逻辑与预期不符，且缺少默认样式，导致900px以下始终显示绿色。

原因分析 #

你当前使用的是min-width媒体查询，它的逻辑是「屏幕宽度大于等于设定值时应用样式」。但代码没有给.test-class设置默认背景色，且媒体查询顺序是从最小宽度到最大宽度：

• 理论上，屏幕在600px-900px之间时，min-width: $small的样式会覆盖min-width: $xsmall，显示粉色；
• 你看到900px以下显示绿色，大概率是浏览器缓存了旧CSS、有其他样式规则覆盖，或是对媒体查询逻辑理解有误。

修正方案 #

方案1：基于min-width的递进式样式（推荐）

给.test-class设置默认样式（对应最小屏幕），再用min-width从下往上覆盖，逻辑更清晰：

$xsmall: 300px;
$small: 600px;
$medium: 900px;
$large: 1200px;
$xlarge: 1500px;
$xxlarge: 2000px;

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  .test-class {
    width: 100%;
    height: 100%;
    // 默认：屏幕<300px时显示紫色
    background-color: purple;
    // 屏幕>=300px时改为粉色
    @media (min-width: $xsmall) {
      background-color: pink;
    }
    // 屏幕>=600px时改为绿色
    @media (min-width: $small) {
      background-color: green;
    }
    // 屏幕>=900px时改为黄色
    @media (min-width: $medium) {
      background-color: yellow;
    }
    @media (min-width: $large) {
      background-color: blue;
    }
    @media (min-width: $xlarge) {
      background-color: orange;
    }
  }
}

方案2：基于min-width + max-width的区间式样式

如果需要精确控制每个宽度区间的样式，可以用区间媒体查询：

$xsmall: 300px;
$small: 600px;
$medium: 900px;
$large: 1200px;
$xlarge: 1500px;
$xxlarge: 2000px;

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  .test-class {
    width: 100%;
    height: 100%;
    // 屏幕<300px
    @media (max-width: $xsmall - 1px) {
      background-color: purple;
    }
    // 300px <= 屏幕 <600px
    @media (min-width: $xsmall) and (max-width: $small - 1px) {
      background-color: pink;
    }
    // 600px <= 屏幕 <900px
    @media (min-width: $small) and (max-width: $medium - 1px) {
      background-color: green;
    }
    // 900px <= 屏幕 <1200px
    @media (min-width: $medium) and (max-width: $large - 1px) {
      background-color: yellow;
    }
    @media (min-width: $large) and (max-width: $xlarge - 1px) {
      background-color: blue;
    }
    @media (min-width: $xlarge) {
      background-color: orange;
    }
  }
}

额外排查点 #

1. 清除浏览器缓存：按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新，确保加载最新编译的CSS；
2. 检查类名：确认HTML中的div确实添加了test-class类；
3. 查看样式优先级：打开浏览器开发者工具（F12），选中目标div，查看「样式」面板，确认是否有其他高优先级样式覆盖了背景色。

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