尽管使用简单，但媒体查询不起作用

Question

我有一个非常简单的媒体查询。但是，它不起作用。这是代码：

<!DOCTYPE html>

<html>

<head>
  <meta content="width=device-width, initial-scale=1" name="viewport" />

  <style>
    #landscape-div {
      display: none;
    }

    @media (min-width: 800px) {
      #landscape-div {
        display: block;
      }
    }
    
  
  </style>
</head>

<body>
  <div id="landscape-div">fsfsfsfsfsdd</div>
</body>

</html>

预期结果：div 应仅在最小宽度大于 800px 时显示。

然而，它一直在出现。为什么会这样？

编辑：根据答案建议编辑了代码。还是不行。

Answer 1

您在 CSS 中使用 . 来引用 id。但是，这仅适用于类。要引用 id，您需要使用 # 符号。

Edit: this was a typo in the original question and has now been fixed.

媒体查询必须首先出现，以确保其他语句不会覆盖它，因为 CSS 文档中稍后出现的语句将被浏览器选择为最相关的。

<!DOCTYPE html>

<html>

<head>
  <meta content="width=device-width, initial-scale=1" name="viewport" />

  <style>

    #landscape-div {
      display: none;
    }

    @media (min-width: 800px) {
      #landscape-div {
        display: block;
      }
    }
    
  </style>
</head>

<body>
  <div id="landscape-div">fsfsfsfsfsdd</div>
</body>

</html>

全屏查看上面的代码片段（通过单击 'expand snippet'）以查看它是否正常工作。

Answer 2

您的媒体查询已被覆盖。最好的做法是在所有样式的末尾写媒体查询

像下面这样更新您的样式：

#landscape-div {
  display: none;
}

@media (min-width: 800px) {
  #landscape-div {
    display: block;
  }
}

尽管使用简单，但媒体查询不起作用

Media queries not working despite simple use

html

css

media-queries

responsive-design