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

我遇到的问题是媒体查询中的所有样式都覆盖了原始样式，即使它没有点击小屏幕媒体查询。

所以在这个例子中，我在一个大屏幕上，但由于某种原因，它使用了媒体查询中的所有样式！

我不想使用！重要，但不明白为什么它这样做会破坏我的整个网站！

由于

编辑：我的媒体查询设置错了 - 需要改变什么？

我的媒体查询是否错误，需要更改哪些内容以避免我的问题？： -

 /* 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

编辑：
您可以通过两种方式订购媒体查询：选项一（如上所述），将它们从最大到最小排序，因为它始终首先应用最近声明的样式。其次，让媒体查询独占块：

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

*请注意，使用此独占版本，媒体查询的顺序无关紧要

从min-width更改媒体查询以使用max-width以避免覆盖？

1 个答案: