响应布局 - 隐藏div出现？

Question

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

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

      display: block;
   }
}

我需要jQuery吗？

Answer 1

您的代码未按预期运行，因为第一个规则的特定范围为1 0 1，而第二个规则的特异性为1 0 0。

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

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

• http://css-tricks.com/specifics-on-css-specificity/
• http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
• http://coding.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/
• http://reference.sitepoint.com/css/specificity
• http://snook.ca/archives/html_and_css/understanding_c
• http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-understanding-css-specificity/
• http://www.standardista.com/css3/css-specificity/

Answer 2

您没有正确选择#test：

div#test { display: none; }

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

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

Answer 3

使用：

#test {
  display: none;
}

写div#test没用，因为#test永远是唯一的。 div#test只会降低您的效果（例如0.000000000001s ;-)）

演示：
http://jsfiddle.net/wpEwZ/

Answer 4

您的代码是正确的，您肯定不需要任何jquery。 如果您想要相反使用最小宽度，则在屏幕尺寸小于320px时将出现测试div。这是example

Answer 5

您的CSS必须为div显示“重要”

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