從最小寬度更改媒體查詢以使用最大寬度以避免重寫？

Question

而不是有一個巨大的responsive.css文件。我包括在同一stylsheet媒體查詢把一切都在一起，例如我有wizard.css文件，具有：

span.crumbsTxt { 
    font-weight: normal; 
    font-size: 16px; 
    line-height: 1.25em; 
} 

然後在同一wizard.css文件的底部，我有：

/* col-sm - Small tablets */ 
    @media (min-width: 768px){ 
     span.crumbsTxt { 
     font-size: 14px; 
     } 
    } 

我遇到的問題是，我的媒體查詢中的所有樣式都覆蓋了我的原始樣式，即使它未觸及小屏幕媒體查詢。

所以在這個例子中，我在一個大屏幕上，但由於某種原因，它使用我的媒體查詢中的所有樣式！

我不想使用！重要的，但不明白爲什麼它這樣做，因爲它打破了我的整個網站！

感謝

編輯： 是我的媒體查詢設置錯誤的，那麼 - 有什麼需要改變？

我的媒體查詢是否錯誤然後，需要更改以避免我的問題？ ： -

/* col-xs - mobile screens */ 
@media only screen and (max-width: 767px) {} 

/* col-sm - Small tablets */ 
@media (min-width: 768px) {} 

/* col-md - Medium screens */ 
@media (min-width: 992px) {} 

/* col-lg - Large Desktop screens */ 
@media (min-width: 1250px) {} 

似乎我的bootstrap.min.css也使用最小寬度。關於如何改變上述媒體查詢來解決我所面臨的壓倒一切的問題的任何想法？

SOLUTION：

這會是更適合 - 正常的CSS第一再訂購媒體詢問第一大下至最小，並使用最大寬度，而不是最小寬度的？我唯一不知道的是我添加的屏幕尺寸值 - 這些好嗎？

Normal css first 

/* col-lg - Large Desktop screens */ 
@media (max-width: 1824px) {} 

/* col-md - Medium screens */ 
@media (max-width: 1250px) {} 

/* col-sm - Small tablets */ 
@media (max-width: 992px) {} 

/* col-xs - mobile screens */ 
@media only screen and (max-width: 767px) {} 

Answer 1

你有你的最大與最小寬度混在一起。

max-width任何地方應用設置下寬和min-width適用上述任何地方

@media (max-width: 768px){ 
    span.crumbsTxt { 
    font-size: 14px; 
    } 
} 

DEMO

編輯：
您有訂購的媒體查詢兩種選擇： 選擇一個（如你在上面注意到），將它們排列得最大到最小，因爲它總是首先應用最近聲明的樣式。 其次，使媒體查詢獨家塊：

@media (min-width: 320px) and (max-width: 768px){ 
    span.crumbsTxt { 
    font-size: 14px; 
    } 
} 

DEMO 2

讓我們通過媒體查詢作爲一個例子走：
（讓我們假設，我們對1000像素的屏幕尺寸）

@media (max-width: 1824px) {} /* this media query will apply because the screen is less than 1824px */ 

@media (max-width: 1250px) {} /* this media query will then apply (on-top-of the first media query) */ 

@media (max-width: 992px) {} /* this media query will not apply because the screen size is greater than 992px */ 

@media only screen and (max-width: 767px) {} /* this media query will not apply because the screen size is greater than 767px */ 

如果你想避免這種級聯效應，你可以像這樣修改你的媒體查詢：

@media (max-width: 1824px) and (min-width: 1251px) {} 
@media (max-width: 1250px) and (min-width: 993px) {} 
@media (max-width: 992px) and (min-width: 768px) {} 
@media only screen and (max-width: 767px) {} 

*注意，與此獨家版本，媒體查詢的順序是無關緊要的