Question

我的CSS中有两个（实际上是三个）@media部分。根据我的经验，我希望一个人会互相覆盖，因为它会在CSS文件中出现。但事实并非如此（在多个浏览器上）。我做错了什么？

HTML：

<div id="experts-partition-1"></div>

CSS：

@media (min-width: 410px) {

    #experts-partition-1 {
        clear: both;
    }
}

@media (min-width: 970px) {

    #experts-partition-1 {
        width: 0px;
        float: right;
    }
}

浏览器应用第一部分（min-width：410px）的expert-partition-1规则而不是第二部分的规则（min-width：970px）。可能是什么原因？

Answer 1

您正在使用Mobile First Approach设计网页。您已在此媒体查询中指定了规则集

    @media (min-width: 410px) {
/* this means rules are applied when the screen size is min 410px and also above that */
    }

主要在Web开发中有两种方法 1.移动优先 2.桌面第一

根据要求选择一个并继续。为了更好地理解，请查看此链接Mobile First vs Desktop First Approach

Answer 2

您的代码正常运行，但条件是，您必须高于970px才能使用@media (min-width: 970px)，或者您可以尝试使用max-width代替min-width，并且序列应该是像这样

@media (max-width: 970px) {

    #experts-partition-1 {
        width: 0px;
        float: right;
    }
}

@media (max-width: 410px) {

    #experts-partition-1 {
        clear: both;
    }
}

使用此序列的原因是css的性质。它从上到下工作。希望它有所帮助

CSS规则不会按预期相互覆盖

2 个答案: