Chrome/Edge浏览器审查元素工具@media查询渲染异常问题求助

针对你遇到的Chrome/Edge DevTools中@media查询不生效的问题，以下是几个常见原因和解决办法：

• DevTools缩放比例干扰
  检查DevTools右上角设置（齿轮图标）→ 外观 → 缩放，确保设为100%。如果DevTools自身被缩放，浏览器计算的视口em值会和实际显示尺寸不匹配，导致@media触发条件偏差。

• em单位的计算基准问题
  em单位会继承父元素字体大小，若页面中存在修改字体大小的样式，会导致60em的实际像素值偏离预期。建议：

  • 改用rem单位（基于根元素font-size，默认16px，60rem=960px）
  • 明确指定根元素字体大小，避免继承干扰：

    html {
      font-size: 16px;
    }
    @media (max-width: 60em) {
      body {
        background-color: #f0f0f0;
      }
    }
    

• 设备工具栏模拟模式异常
  若使用了DevTools的设备模拟工具栏，切换回「响应式」模式，手动拖动视口边缘调整尺寸。同时在DevTools的「计算」面板查看实际视口宽度，确认是否达到60em的阈值。避免自定义设备的分辨率设置覆盖视口计算。

• 缓存导致的样式不更新
  强制刷新页面（Ctrl+Shift+R），并在DevTools设置中勾选「禁用缓存（当DevTools打开时）」，排除旧CSS缓存的影响。

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