Question

我一直在进行max-width媒体查询，但我知道bootstrap会min-width样式媒体查询，而我正试图在我当前的项目中遵循这种风格。

我有以下类声明（此处没有媒体查询）

.Mobilemenutrigger {
    padding: 2px 12px 2px 12px;
    background: #6bb854;
    display: inline-block;
    float:right;
    margin-right: 20px;
    margin-top: 20px;
}

然后按照bootstrap的媒体查询约定，我有以下

@media (min-width: 768px) { 
    .Mobilemenutrigger {
        display: none;
    }
}

然而，当我在浏览器中查看此内容时，原始声明正在应用，并且媒体查询并没有像我认为的那样过度使用原始声明。

我知道我可以在媒体查询中添加!important，但在进行min-width样式媒体查询时我不需要这样做。我错过了一些非常明显的东西吗？

Answer 1

确保浏览器在读取初始类属性后正在读取媒体查询。

Answer 2

您的文件的加载顺序是什么？如果在media.css之后加载main.css，它将无法正常运行。尝试最后添加media.css，看看会发生什么。

Answer 3

由于specificity相同，您必须在初始声明后添加mediaquery。

如果你颠倒了顺序，它将导致对媒体查询的一般规则的一般规则。

按照这个确切的顺序编写，它将按照here所示正确运行：

.Mobilemenutrigger {
    padding: 2px 12px 2px 12px;
    background: #6bb854;
    display: inline-block;
    float:right;
    margin-right: 20px;
    margin-top: 20px;
}

@media (min-width: 768px) { 
    .Mobilemenutrigger {
        display: none;
    }
}

相反，如果您反转顺序，并且屏幕宽度超过768px，则首先，mediaquery将设置display: none;，然后更一般的规则将使用display: inline-block;覆盖它

CSS Media Query不会覆盖

3 个答案: