css - 响应式布局 - 使隐藏的 div 出现？

Question

我对响应式布局很陌生。除了一件事之外，我似乎一切都对我有利：我无法使用'display: none;'属性制作 div，当我'display: block;'在媒体查询中将其设置为时出现。

#test {
display: none;
}
@media screen and (max-width:320px) {
   #test {

      display: block;
   }
}

我需要jQuery吗？

score 1 · Accepted Answer

您的代码没有按您预期的那样运行，因为第一个规则1 0 1的特异性为，而第二个规则的特异性为1 0 0。

如果你只写#test, 而不是div#test，它将起作用，因为当两个规则具有相同的特异性时，将应用最后一个。

您可以在此处阅读有关 CSS 特异性的更多信息：

score 0 · Accepted Answer

您的代码是正确的，您肯定不需要任何 jquery。当屏幕尺寸小于 320px 时会出现测试 div，如果你想相反使用 min-width。这是示例

score 0 · Accepted Answer

利用：

#test {
  display: none;
}

写是没用的div#test，因为#test总是独一无二的。div#test只会减慢你的表现（像 0.000000000001s ;-) ）

score 0 · Accepted Answer

您没有正确选择#test：

div#test { display: none; }

@media screen and (max-width:320px) {
   div#test { display: block; }
}

一个工作示例：http: //jsfiddle.net/jvqra/

score 0 · Accepted Answer

您的 CSS 必须指定“重要”才能使 div 出现

@media screen and (max-width:320px) {
  #test { block !important;}
}

5 回答 5