时间戳

首页 > 解决方案 > 尽管使用简单，媒体查询仍不起作用

html - 尽管使用简单，媒体查询仍不起作用

问题描述

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

<!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 像素时才会显示。

然而，它无时无刻不在出现。为什么会这样？

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

标签： htmlcssresponsive-designmedia-queries

解决方案

您指的是在您的 CSS 中id使用 a 。.但是，这仅适用于类。要引用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>

全屏查看上面的代码片段（通过单击“扩展片段”）以查看它是否正常工作。

推荐阅读