CSS 媒体查询不过度骑行

Posted 2023-03-06

【中文标题】CSS 媒体查询不过度骑行

【英文标题】：CSS Media Query not over riding

【发布时间】：2015-04-19 12:35:29

【问题描述】：

我一直使用max-width 媒体查询，但我知道引导程序会使用min-width 样式的媒体查询，我正在尝试在我当前的项目中遵循这种样式。

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

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

但是，当我在浏览器中查看此内容时，正在应用原始声明，并且媒体查询并没有像我认为的那样覆盖原始声明。

我知道我可以将!important 扔到媒体查询上，但我的印象是在执行min-width 风格的媒体查询时我不需要这样做。我在这里遗漏了一些非常明显的东西吗？

【问题讨论】：

确保将媒体查询规则放在正常规则之后。

hmm...它们在单独的文件中，我想知道我是否将媒体查询文件包含在我的主要 css 包含之后，如果这会有所不同

是的，这就是问题所在。将媒体查询文件移到主 css 文件之后。

就是这样...我将媒体查询 css 文件移动到我的主 css 之后。一切都按预期工作。如果您将其放入答案中，我将很乐意接受它

我认为接受 IAteYourKitten 的回答是公平的，因为它在技术上是正确的，虽然被否决了。

【参考方案1】：

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

【讨论】：

是的，抱歉，我错过了您帖子中关于 !important 属性的最后一段。

如果你正确使用媒体查询，这个例子完全没有必要

修复在我的回答中。我犯了一个错误，将编辑我的答案。

【参考方案2】：

由于相同的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;
    

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

【参考方案3】：

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