添加自定义CSS后Media query失效，求可复现故障的排查方向

问题根因 #

你注释的自定义CSS块末尾存在语法错误，导致后续的媒体查询规则被浏览器判定为非法内容直接忽略，无法生效。具体错误点如下：

/* 错误写法：大括号闭合后多了一个多余的半角分号 */
.cr-wrap .active  {
    visibility:visible !important;
};*/

修复方案 #

直接删除大括号外的多余分号即可，修改后代码如下：

/* 正确写法 */
.cr-wrap .active  {
    visibility:visible !important;
}*/

修改完成后取消自定义CSS的注释，媒体查询即可正常生效。

通用排查思路 #

• 优先校验CSS语法：打开浏览器开发者工具的「源代码」面板，找到对应CSS文件查看是否有标红的语法错误提示，语法错误是导致后续整段CSS规则失效的最常见原因。
• 检查规则优先级与书写顺序：确认媒体查询规则写在对应普通样式的后面，避免被前面的同优先级规则覆盖，同时排查是否有带!important的更高优先级规则覆盖了媒体查询内的样式。
• 确认viewport配置正确：你当前已经配置了正确的移动端viewport元标签，做响应式适配时需确保该标签存在，否则媒体查询的宽度判断会基于物理像素，导致阈值判断异常。
• 检查符号闭合问题：排查所有CSS规则的大括号、小括号、引号是否成对闭合，注释的/*和*/是否正确配对，这类符号错误会导致大范围的CSS解析失败。

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