Question

所以我正在一个网站上工作，有一个媒体查询的奇怪问题，一些规则被覆盖。这是一个模板，所以有一个基础'框架'CSS，然后是另一个模板特定的CSS文件。为清楚起见，这是我的HTML文件中的顺序

<link href="/themes/Base/base.min.css" rel="stylesheet" type="text/css"> <!-- Contains all of the base rules, including the base mobile rules-->
<link href="/themes/MyTheme/theme.min.css" rel="stylesheet" type="text/css"> <!-- Contains all of the theme specific overrides-->

在base.min.css我有这些规则：

@media all and (max-width: 800px) {
....
#menu {
position: relative;
width: 100%;
min-height: auto;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
text-align: center;
border-bottom-width: 1px;
border-bottom-style: solid;
border-top-width: 1px;
border-top-style: solid;
background-image: none;
}
....

然后在HTML文件中的theme.min.css文件中，我有这些规则

....
#menu {
box-sizing: border-box;
text-align: left;
padding: 10px;
min-height: 320px;
width: 300px;
box-shadow: 0 0 5px #000000;
position: relative;
margin: -20px 0 0 0;
z-index: 100;
background-position: bottom right;
background-repeat: no-repeat;
background-image: url(/themes/global/images/watermarks/watermark9.png);
}
....

请注意，第二组规则不包含在媒体查询中。尽管如此，其中的大多数规则都超越了之前的规则。高度，宽度，背景图像等我假设媒体查询的优先级如果其他一切都相同（尽管后来会出现）由于特异性增加。我的意思是，如果我需要，我可以在那里拍一堆!important;，但这似乎是一个绑带，而不是解决方案。

Answer 1

基本上你的第二组CSS是＆＃34;所有＆＃34;的媒体查询，并且在最大宽度规则之后，它也将应用于最大宽度800px视图。

我是否正确地认为其中一些规则不应该在800px下应用？如果是这样，请将它们放入最小宽度规则中，然后不再使用它们。例如在theme.css中：

#menu {

    /*Put rules for any width in here*/

}    

@media all and (min-width: 801px) {
    #menu {
        /*Put rules you don't want inherited by max 800 in here*/
        min-height: 320px;
        width: 300px;
        ...
    }
}

媒体查询规则不优先

1 个答案: