多个媒体查询不起作用

嘿家伙我不完全接受多媒体查询。这里是我的意思多个媒体查询不起作用

的html代码：

<div class="container"> 
    <div class="jumbotron"> 
     <h1 id ="jumbo_text">{% block jumbo_text1 %} {% endblock %}</h1> 
     <h2 id ="jumbo_text2">{% block jumbo_text2 %} {% endblock %}</h2> 
    </div> 
</div>

CSS代码：

@media only screen and (min-width: 200px) and (max-width: 767px) { 
    .jumbotron { 

     display: none; 
    } 
} 

@media only screen and (max-width: 768px){ 
    .jumbotron { 

     height: 200px !important; 
     width:300px; 
     background-image: url("../../img/jumbo_pics/bbj_class.jpg"); 
    } 

}

基本上是第二媒体查询作品，但第一个没有。为什么？

伪代码：

devices that are at minium 200px and maximum 360px dont show jumbotron 

devices above 360px but below 768px show jumbotron with height of 200px and width of 300px

我真的糊涂max-width和min-width太

之间不max-width意味着一个装置，它的宽度为最大n，因此下面n样式应用于各种规模？

并且确实min-width是指最小宽度为n以及所有尺寸大于n这种样式适用的设备？

我会收到这样吗？

来包装这件事：

怎么办多个媒体查询具有不同范围？
是我的min-width和max-width正确的认识？

来源

2015-10-15 Zion

第二个媒体查询后出现在样式表，所以它的优先级。因为在这两种情况下，你都提到了max-width：767px和max-width：768px，它们在200-768px范围内重叠，因此后面出现的第二个已经产生影响。

设备上方360像素，但低于768px

您只提到最大宽度吧？最小宽度在这里没有影响。媒体“屏幕”是查看该页面的设备的限制，在这种情况下恰好是除“打印”之外的设备。

关于媒体查询here和here有很好的讨论。

此外，媒体查询具有与其他css规则相同的特定性。因此，不要期望媒体查询优先于具有相同选择器的css规则，除非它稍后出现。

因此，解决您的问题的一个好方法就是以这种方式编写它。

.jumbotron{ 
/*for other device sizes 
write styles here */ 
} 

@media only screen and (min-width: 200px) and (max-width: 360px) { 
    .jumbotron { 
      display: none; 
    } 
} 

@media only screen and (min-width:361px) and (max-width: 768px){ 
    .jumbotron { 
     height: 200px !important; 
     width:300px; 
     background-image: url("../../img/jumbo_pics/bbj_class.jpg"); 
    } 

}

而且你的最小宽度和最大宽度的理解是正确的，但是它总是一个好主意，用他们两人在媒体查询，以确保范围不重叠，你最终有一个规则这是不可取的。

来源

2015-10-15 02:08:51

你能告诉我一个代码片段来可视化正确的做法吗？ – Zion

确定这么像在我的文章中的伪代码要写在CSS将如何看起来像？ – Zion

多个媒体查询不起作用

回答

相关问题