桌面端无法显示Media Queries效果，仅审查页面时可见求助

问题描述 #

学习Media Queries时，在Chrome或Firefox中打开HTML文件页面完全空白，但进入审查模式后能看到代码正常渲染，也能查看Media Queries的效果。调整min-width和max-width参数后，所有浏览器打开页面仍空白。

原始代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Beginners CSS - Chapter 8</title>

    <style type="text/css">
      * {
        margin: 0px;
      }

      main {
        margin: 10px auto;
        width: 600px;
        padding: 30px;
        margin-top: 0px;
        background-color: olive;
        display: block;
      }

      @media screen and (max-width: 350px) {
        main {
          background-color: #88a5e0;
        }
      }

      @media screen and (min-width: 600px) {
        main {
          background-color: red;
        }
      }

      @media screen and (min-width: 800px) {
        main {
          background-image: url('images/Reeds-in-Wind-Cinemagraph.gif');
          background-repeat: no-repeat;
          background-size: cover;
          padding-bottom: 400px;
        }
      }

      @media screen and (min-width: 1000px) {
        main {
          background-image: none;
          background-color: #fff;
        }

        h1,
        p {
          display: none;
        }
      }
    </style>
  </head>
  <body>
    <main>
      <h1>Media Queries</h1>
      <p>Media allows you to make your pages to change to fit any device.</p>
    </main>
  </body>
</html>

问题原因 #

空白的核心原因是当浏览器窗口宽度≥1000px时，触发了@media screen and (min-width: 1000px)规则：

• 该规则将main的背景色设为#fff（白色），和浏览器默认的页面背景色一致，视觉上无法区分main区域。
• 同时把h1和p设置为display: none，直接隐藏了页面唯一的文字内容。
• 审查模式下能看到元素是因为浏览器审查工具会高亮选中的元素，所以能识别到页面结构，但正常浏览时就会显示空白。

修复方案 #

方案1：修改1000px断点的样式 #

调整该断点下的样式，让main区域和页面背景区分开，或者取消文字隐藏：

@media screen and (min-width: 1000px) {
  main {
    background-image: none;
    background-color: #f5f5f5; /* 改用浅灰色，和白色背景区分 */
    border: 1px solid #ddd; /* 添加边框，明确main区域范围 */
  }
  /* 保留文字显示，或者根据需求调整 */
  /* h1, p { display: none; } */
}

方案2：缩小浏览器窗口测试 #

将浏览器窗口宽度缩小到1000px以下，就能看到main区域和文字内容，同时可以验证其他Media Queries的效果是否正常。

方案3：检查背景图片路径（可选） #

如果800px断点下页面也异常，检查images/Reeds-in-Wind-Cinemagraph.gif的路径是否正确：确保HTML文件同级存在images文件夹，且图片文件名称和格式完全匹配。

内容的提问来源于stack exchange，提问作者Joel C.