CSS 媒体查询没有越界

Question

我一直在做 max-width 媒体查询，但我知道 bootstrap 做 min-width 风格的媒体查询，我正在尝试在我当前的项目中遵循这种风格。

我有以下class声明（这里没有媒体查询）

.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

确保浏览器在读取初始 class 属性后读取您的媒体查询。

Answer 2

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

Answer 3

由于相同 specificity，您必须在初始声明后添加媒体查询。

如果您颠倒顺序，将导致通用规则覆盖媒体查询的规则。

按此顺序写入，它将运行正确显示 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 媒体查询没有越界

CSS Media Query not over riding

html

css

twitter-bootstrap

media-queries