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

Answer 1

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

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

另外，请记住，如果两个选择器适用于同一个元素，那么具有更高特异性的元素将胜出。

Answer 2

    @media only screen and (max-width: 780px) 
{
    .class
    {
        styles
    }
}

当你使用这个代码时，当屏幕小到780px时，一切都会重新开始。但是当你使用最小宽度的时候，当屏幕大到780px时，所有的都会重新开始。

Answer 3

您在媒体查询中写入最小宽度，并且无法以最大宽度写入。在检查后也给出最大宽度。

@media（min-width：800px）和（max-width：767px）{

}

在主样式表中包含响应式样式 - 覆盖主要样式

3 个答案: