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 似乎也使用最小宽度。关于如何更改上述媒体查询以解决我遇到的最重要问题的任何想法？

Answer 1

将min-width更改为max-width
您还可以应用 min-width 和 max-width

@media only screen 
and (min-device-width : 420px) 
and (max-device-width : 780px) 

另外，请记住，如果两个选择器应用于同一元素，则特异性较高的选择器胜出。