Chrome设备预览异常？响应式设计媒体查询未触发问题

嘿，我之前做响应式开发时也踩过一模一样的坑！这种“明明调了视口宽度但媒体查询就是不生效”的迷惑行为，大概率是下面几个常见原因导致的，你可以逐一排查：

• 最容易忽略的：缺少viewport元标签
  这可是响应式设计的基础！如果你的HTML头部没加这个标签：

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

  浏览器会默认把页面按桌面端宽度（通常是980px左右）渲染，哪怕你在Device Preview里把视口调到425px以下，浏览器计算媒体查询时还是用的这个默认宽度，自然不会触发你的规则。赶紧补上这个标签试试！

• 媒体查询的条件或语法写错了
  仔细检查你的查询代码，是不是把逻辑搞反了？比如本来要写max-width: 425px（视口≤425px时生效），结果写成了min-width: 425px（视口≥425px时生效）？另外还要留意单位有没有写错（比如把px写成pt）、括号有没有配对，这些小细节很容易翻车。

• 浏览器缓存或DevTools状态异常
  有时候旧CSS缓存会干扰测试，或者DevTools的Device Preview没同步视口变化。试试按下Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）硬刷新页面，或者在DevTools的Network面板勾选“Disable cache”选项，再重新测试。

• CSS优先级冲突
  看看媒体查询里的样式是不是被其他更具体的选择器覆盖了？打开浏览器Elements面板，找到对应元素查看“Styles”面板，如果媒体查询的规则被划掉了，说明优先级不够。你可以给查询里的选择器增加特异性（比如加上父元素选择器），或者临时用!important测试是不是优先级问题（别长期用!important，只是排查用）。

如果这些都试过还是没解决，你可以把测试代码里的媒体查询部分贴出来，我帮你再仔细揪问题！

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