为何针对最小宽度1024px设备设置的@media screen CSS规则不生效

你贴出的HTML和CSS代码本身没有语法错误，媒体查询的写法合法，按照以下步骤排查即可定位原因：

排查步骤 #

• 确认浏览器视口实际宽度
  若浏览器设置了缩放比例，会导致逻辑视口宽度达不到1024px的触发条件。比如浏览器缩放为125%时，1024px物理宽度对应的逻辑宽度仅819px，无法触发断点。可打开浏览器开发者工具的响应式调试面板，直接查看当前视口的精确宽度值。
• 验证媒体查询是否真的未触发
  你提供的CSS规则中，h2在断点前后的字号均为4rem，没有差异，很容易让人误以为整个媒体查询都未生效。可在媒体查询内添加一条辨识度高的测试样式验证：

  @media screen and (min-width: 1024px) {
    body {
      font-size: 1.8rem;
      background: #e0f7fa; /* 触发断点后背景会变成浅青色，一眼可识别 */
    }
    /* 其余原有规则保持不变 */
  }
  

  只要宽屏下背景色发生变化，就说明媒体查询本身工作正常，只是原有样式的变化幅度太小没有被察觉。
• 清理浏览器缓存
  浏览器大概率缓存了旧的CSS文件，按Ctrl+F5（Windows系统）/Command+Shift+R（Mac系统）硬刷新页面即可，也可以打开开发者工具的「网络」面板，勾选「禁用缓存」选项后再刷新。
• 检查样式覆盖情况
  打开浏览器开发者工具的「元素」面板，选中body标签，查看样式列表里的媒体查询规则是否被划掉。如果被划掉，说明存在更高优先级的样式覆盖了当前规则，调整对应选择器的权重或者代码顺序即可。

内容的提问来源于stack exchange，提问作者João Silva