SCSS中配置的Media Query未正常生效，该如何排查问题？

SCSS Media Query 不生效排查方案 #

• 首先确认HTML<head>中是否添加了视口标签，这是响应式生效的前提，缺失的话直接复制以下代码添加即可：

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

• 检查SCSS文件导入顺序：断点配置文件必须导入在所有业务样式文件之前，如果导入顺序在业务代码之后，响应式规则会被前面的普通样式覆盖，无法生效。
• 核对断点语法：如果是用mixin封装的断点，检查调用时是否正确使用@include关键字，传入的断点名称是否和你定义的完全一致（比如定义的sm就不能写成small）。
• 检查样式优先级：确认响应式规则的选择器权重不低于普通样式的选择器权重，普通样式如果加了!important或者使用了层级更高的选择器，会覆盖响应式规则。
• 验证编译结果：打开浏览器开发者工具的样式面板，查看最终生成的CSS文件中是否包含你写的Media Query规则，如果没有就是导入路径写错或者SCSS编译环节出错，导致断点配置没有被打包到最终CSS里。
• 核对断点区间逻辑：确认你写的min-width/max-width没有写反，多个断点区间没有重叠冲突，否则会出现符合条件时规则被后续断点覆盖的问题。

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