Question

我有两个媒体查询。

@media (min-width: 1300px) {
    .container {
        width: auto;
        max-width: 1360px;
    }
}
@media (min-width: 1565px) {
    .container {
        width: auto;
        max-width: 1576px;
    }
}

无论宽度如何。容器始终作为第一个媒体查询。我的意思是当身体的宽度是1570px时，容器宽度仍然是1360px！

Answer 1

在HTML <head>中设置viewport非常重要。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 2

只需撤消@media查询顺序。

@media (min-width: 1565px) {
    .container {
        width: auto;
        max-width: 1576px;
    }
}

@media (min-width: 1300px) {
    .container {
        width: auto;
        max-width: 1360px;
    }
}

Answer 3

您可以尝试这样的事情：

@media only screen and (min-width:1300px) and (max-width: 1565px)  {
    .container {
        width: auto;
        max-width: 1360px;
    }
}

@media only screen and (min-width:1565px) {
    .container {
        width: auto;
        max-width: 1576px;
    }
}

Answer 4

我相信还有其他方法可以实现您的目标。我不建议你像这样叠加最小宽度的查询，而是设计你的网站以某种方式表现，无论最小宽度如何，并且只使用媒体查询，使用max-width。

Answer 5

试试这个......

@media only screen and (min-width:1300px) and (max-width: 1564px)  {
    .container {
        max-width: 1360px;
        width: 100%;
    }
}

@media only screen and (min-width:1565px) {
    .container {
        max-width: 1576px;
        width: 100%;

    }
}

媒体查询最小宽度不起作用

5 个答案: