html - 将媒体查询从最小宽度更改为使用最大宽度以避免覆盖？

Question

而不是拥有一个庞大的 responsive.css 文件。我将媒体查询包含在同一个样式表中以将所有内容放在一起，例如我有 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，然后将媒体查询从大到小排序，并使用最大宽度而不是最小宽度？我唯一不确定的是我添加的屏幕尺寸值 - 这些可以吗？

 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

编辑:
您有两种选择来排序媒体查询:选项一(如上所述)，将它们从大到小排序，因为它总是首先应用最近声明的样式。其次，使媒体查询独占 block :

@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) {}

*注意，对于这个独家版本，媒体查询的顺序无关紧要