媒体查询 - 我如何在 div 最初未显示时以最大宽度显示

Question

我有一个名为 "container" 的 div，它应该在最大宽度达到 47em 时显示。这可以通过放大来触发。它的初始显示是 none 但在媒体查询中我将其更改为显示块。问题是，即使在放大到足以使最大宽度变为 47em 之后，它仍然没有显示任何内容。为什么会这样，我该如何解决这个问题？

代码：http://codepen.io/anon/pen/RWBJXv

 html,
 body {
   height: 100%;
   margin: 0px;
   font-family: verdana, arial, helvetica, sans-serif;
 }
 
 @media (max-width: 47em) {
   #container {
     display: block;
   }
 }
 
 div#container {
  display:none;
}
 
 div#nav {
   position: relative;
   width: 100%;
   background: white;
   box-shadow: 1px 1px 15px #888888;
 }
 
 div#logo {
   border-right-style: solid;
   border-width: 1px;
   border-color: rgba(0, 0, 0, 0.15);
   font-family: 'Myriad Pro Regular';
   font-weight: normal;
   color: #1E3264;
   font-size: 2em;
 }

<body>
  <div id="container">
    <div id="nav">
      <div id="logo">TEST</div>
    </div>
  </div>

Answer 1

您的代码有几个问题：

首先，div#container 是一个 css 选择器，比 #container 具有 更高的特异性 ，您在媒体中使用它查询，因此一般规则优先。

其次，确保始终将媒体查询规则放在一般规则之后。

http://codepen.io/anon/pen/zvLLPa

Answer 2

似乎是顺序和特异性问题。

尝试改变这个

 @media (max-width: 47em) {
   #container {
     display: block;
   }
 }

 div#container {
  display:none;
}

对此：

 #container {
  display:none;
}

 @media (max-width: 47em) {
   #container {
     display: block;
   }
 }

Codepen Demo

Answer 3

如果您将媒体查询与常规 css 交换，并添加一个重要的标签，这将解决您的问题示例：

 #container {
  display:none;
}

 @media (max-width: 47em) {
   #container {
     display: block;
   }
 }

查看此代码笔：http://codepen.io/sshhdaniella/pen/EVppwR

媒体查询 - 我如何在 div 最初未显示时以最大宽度显示

Media query - how do i make a div display on max-width when it's not initially displayed

html

css

zooming

media-queries

web