在哪個命令中使用Twitter Bootstrap斷點？

Question

對於媒體查詢，必須使用Twitter Bootstrap斷點自上而下或自下而上，何時定義最大寬度定義 - 在最小寬度定義之前還是之後？我似乎沒有從tb-stylesheet得到答案。當用我自己的樣式表使用這些斷點時，它看起來順序很重要，因爲我把定義定義爲滅絕或無知。

我需要照顧的設備withs < 768（這是最後一個斷點* -xs定義）。我必須照顧320像素，480像素和600像素，並試圖構建一個可靠的處理順序。這些是我目前的定義，在某些時候似乎相互超越。

/* lg and up */ 
@media (min-width: 1200px) 
/* md only */ 
@media (min-width: 992px) and (max-width: 1199px) 
/* md and up */ 
@media (min-width: 992px) 
/* sm only */ 
@media (min-width: 768px) and (max-width: 991px) 
/* sm and up */ 
@media screen and (min-width: 768px) 
/* xs only */ 
@media (min-width: 767px) 
@media screen and (min-width: 480px) and (max-width: 767px) 
/* e.g. iPhone 5 landscape */ 
@media screen and (min-width: 568px) 
/* e.g. iPhone 4 landscape */ 
@media screen and (min-width: 480px) 
/* e.g. iPhone 4 portrait */ 
@media screen and (min-width: 320px) 
@media screen and (max-width: 320px) 
/* e.g. Blackberry */ 
@media screen and (max-width: 349px) 
@media screen and (max-width: 479px) 
@media screen and (max-width: 567px) 
@media screen and (max-width: 991px) 

有人可以澄清正確的順序，以防止定義滅絕？

Answer 1

CSS級聯規則也適用於媒體查詢時，如果要覆蓋與媒體查詢規則，你需要確保的是，媒體查詢包含具有相同的選擇（或選擇更明確）的規則和它會在您要覆蓋的規則之後加載。

當您有多個媒體查詢時也同樣適用。級聯順序以及特定性和繼承的規則將決定是否應用媒體查詢。舉個例子：

body { 
    background-color: teal; 
} 
@media (min-width: 600px) { 
    body { 
     background-color: tomato; 
    } 
} 
@media (min-width: 400px) { 
    body { 
     background-color: yellowgreen; 
    } 
} 

上述選擇的每一個都相同，故它們具有相同的特異性，但由於層疊順序，背景永遠是番茄的顏色。如果身體寬度爲600或更多像素，製作背景番茄的規則將被最後一條規則覆蓋，因爲600px也寬於400px。

如果重新排序規則如下：

body { 
    background-color: teal; 
} 
@media (min-width: 400px) { 
    body { 
     background-color: yellowgreen; 
    } 
} 
@media (min-width: 600px) { 
    body { 
     background-color: tomato; 
    } 
} 

現在，身體背景將是水鴨，當人體小於400像素寬。當身體是400px - 599px時，它會變成黃綠色，當背景寬度爲600px或更大時，它會變成番茄。

當然，您也可以使用最大寬度。例如，如果您有下列順序，在599px爲黃綠規則上的寬度限制將確保這條規則不適用，一旦身體600px的以上：

body { 
    background-color: teal; 
} 
@media (min-width: 600px) { 
    body { 
     background-color: tomato; 
    } 
} 
@media (min-width: 400px) and (max-width: 599px) { 
    body { 
     background-color: yellowgreen; 
    } 
} 

所以，爲TL; DR版本，首先想到移動。用您的基本樣式組織您的樣式表，爲您的最小設備定義。然後從下一個最小的設備尺寸開始訂購媒體查詢，以便您想要支持的最大設備是最後一個。

而且，不要忘記，以確保您的媒體查詢規則使用選擇相同或比你要重寫規則更專一。