多個媒體查詢不起作用

嘿傢伙我不完全接受多媒體查詢。這裏是我的意思多個媒體查詢不起作用

的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

多個媒體查詢不起作用

回答

相關問題