SCSS中@media媒体查询失效求助：原有width样式未被覆盖

常见原因及排查步骤： #

1. 媒体查询语法错误（最常见）

如果断点范围写反，比如写成 @media (max-width:376px) and (min-width:768px)，这个区间不存在，媒体查询永远不会触发。376px-768px断点的正确写法是：

@media screen and (min-width: 376px) and (max-width: 768px) {
  // 你的样式
}

注意：screen 可选，但加上能避免部分浏览器兼容性问题；必须保证 min-width 值小于 max-width。

2. 视口元标签缺失

移动端浏览器默认会使用桌面端视口宽度（通常为980px），如果HTML的<head>里没加viewport标签，即使设备宽度在376-768之间，媒体查询也不会激活。必须添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

3. 选择器权重不足或CSS顺序错误

• 若原有样式的选择器权重比媒体查询里的高（比如原有是 .container .card，媒体查询里只写了 .card），即使媒体查询激活，新样式也无法覆盖旧样式。要保证媒体查询内的选择器权重和原有样式一致或更高。
• 编译后的CSS中，媒体查询代码必须在原有样式之后。SCSS嵌套写法会自动保证顺序（如下），但如果手动把媒体查询写在原有样式之前，就会被覆盖：

  // 正确嵌套写法，编译后媒体查询样式在原有样式之后
  .card {
    width: 100%;
    @media screen and (min-width: 376px) and (max-width: 768px) {
      width: 80%;
    }
  }
  

4. 实际视口宽度不在断点区间内

打开浏览器开发者工具的响应式模式，确认当前视口宽度确实在376px-768px之间——有时候不小心拖到375px或769px，都会导致媒体查询未激活。

5. SCSS编译异常

检查编译后的CSS文件，确认媒体查询代码是否正确输出，有没有括号未闭合、单位写错（比如把px写成pt）这类低级错误。

示例修正代码 #

SCSS：

// 基础样式
.card {
  width: 100%;
  padding: 1rem;
}

// 断点样式（放在基础样式之后）
@media screen and (min-width: 376px) and (max-width: 768px) {
  .card {
    width: 85%;
    margin: 0 auto;
  }
}

HTML（必须包含viewport）：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="card">测试内容</div>
</body>
</html>

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