將媒體查詢從最小寬度更改為使用最大寬度以避免覆蓋？

Question

而不是擁有一個巨大的響應文件。 我將媒體查詢包含在同一樣式表中，以使所有內容保持在一起，例如，我具有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;
       }
    }

我遇到的問題是，即使沒有出現在小屏幕媒體查詢中，我從媒體查詢中獲得的所有樣式都將覆蓋我的原始樣式。

因此，在此示例中，我處於大屏幕上，但是由於某種原因，它使用了媒體查詢中的所有樣式！

我不想使用！important，但是不明白為什么這樣做會破壞整個網站！

謝謝

編輯：那我的媒體查詢設置是否錯誤-需要更改什么？

那么，我的媒體查詢是否有誤，需要進行哪些更改以避免出現問題？ ：-

 /* 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也使用最小寬度。 關於如何更改上述媒體查詢以解決我遇到的首要問題的任何想法？

解：

這會更好嗎？先使用普通的CSS，然后再將最大的媒體查詢順序降為最小，然后使用max-width而不是min-width？ 我唯一不確定的是我添加的屏幕尺寸值-這些可以嗎？

 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;
   }
}

演示

編輯：
您可以通過以下兩種方式對媒體查詢進行排序：選項一（如上所述），將其排序為大到小，因為它將始終首先應用最新聲明的樣式。 其次，使媒體查詢排他塊：

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

演示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) {}

*請注意，使用此專有版本，媒體查詢的順序無關緊要