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

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，然后将媒体查询从最大到最小排序，然后使用 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;
   }
}

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

*注意，在此独家版本中，媒体查询的顺序无关紧要