Media Query失效求助：样式代码后置导致响应式不生效问题排查

• 先核对语法正确性：检查@media规则的写法，比如媒体类型（screen/print等）、断点条件的括号、逻辑运算符（and）是否正确，单位有没有漏写。举个正确示例：

  @media screen and (max-width: 768px) {
    .contact-section {
      padding: 1rem;
    }
  }
  

• 排查优先级冲突：如果常规CSS里用了ID选择器、!important或者更具体的选择器，哪怕Media Query在后面也会被覆盖。可以给Media Query里的选择器增加特异性，或者移除常规样式里的!important。
• 确认viewport元标签：HTML的<head>里必须加这个标签，否则移动端浏览器会用桌面渲染逻辑，Media Query不会触发：

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

• 检查嵌套错误：别把Media Query写在其他CSS规则内部，这样浏览器会忽略它。
• 做快速测试：在Media Query里加个显眼的样式，比如body { background-color: #ff0000; }，调整窗口大小看是否触发，判断是断点不匹配还是样式没生效。

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