尽管使用简单，媒体查询仍不起作用答案

【问题标题】：Media queries not working despite simple use尽管使用简单，媒体查询仍不起作用
【发布时间】：2020-01-15 03:39:45
【问题描述】：

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

<!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 应仅在最小宽度超过 800 像素时显示。

但是，它一直在出现。为什么会这样？

编辑：按照答案的建议编辑代码。还是不行。

【问题讨论】：

一方面，您的 HTML 使用的是 ID，而您的样式使用的是 class。样式的顺序也很重要。尝试将媒体查询放在原始样式之后。
display: none 将总是触发，因为它不合格，所以无论应用什么媒体查询都会立即被覆盖。
@Martin 那么解决方法是什么？我以前肯定用过这个。
@RayNorman 我下面的回答解决了这个问题。抱歉，一开始就含糊不清，但我现在已经对其进行了编辑，并且运行良好。（按“展开sn-p”查看代码sn-p整页试一试）
如果你把你的查询写成@media only screen and (max-width: 600px) with display: none; display: none 会像 ray 预期的那样触发，但是，它必须这样写。 xD

标签： html css responsive-design media-queries

【解决方案1】：

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

编辑：这是原始问题中的拼写错误，现已修复。

媒体查询必须先出现，以确保其他语句不会覆盖它，因为 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>

全屏查看上面的代码 sn-p（通过单击“展开 sn-p”）以查看它是否正常工作。

【讨论】：

这仍然需要一些修复。媒体查询需要在初始 display: none 规则之后才能使其工作，因为... CSS 级联。请参阅 Paulie_D 对上述问题的评论。
输入错误。它仍然无法正常工作。
@volt 你能解释一下吗？媒体查询放在 display:none 之后
@Run_Script "请注意，div 根本不会出现在上面的代码 sn-p 中，因为宽度始终保持在 800px 以下。" - 我不明白。它实际上出现在所有屏幕上。另外，如果我从任何大小超过 800 像素的屏幕打开 div，它应该是可见的，对吧？
@RayNorman 答案是在我发表评论后编辑的。一旦您单击上面 sn-p 中的完整页面链接，它现在应该可以工作了。 +1 修复它 Run_Script

【解决方案2】：

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

如下更新你的样式：

#landscape-div {
  display: none;
}

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

【讨论】：