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

Question

我有两个媒体查询。

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

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

- Kareem Abdelwahed

---

使用 max-width:1576px !important; - Sagar Kodte

Answer 1

在HTML的中设置视口非常重要。

- fotijr

Answer 2

只需将@media查询的顺序反转即可。

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

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

- Mukesh Ram

---

同样的问题。容器始终为1576像素 - 因为它是第一个媒体查询 - 即使body的宽度为1500像素。 - Kareem Abdelwahed

你能分享一下你的链接吗？ - Mukesh Ram

这是本地页面。你所说的“我的链接”是什么意思？ - Kareem Abdelwahed

Answer 3

我相信有其他方法可以实现你想要的效果。我不建议像那样堆叠min-width查询，而是设计你的网站以一定的方式行为，而不管最小宽度如何，并且只在较小的屏幕上使用媒体查询，使用max-width。

- user6481449

Answer 4

你可以尝试这样做：

@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;
    }
}

- krozaine

---

当我将body宽度设置为1550像素时，容器的宽度为1576像素，出现了问题。 - Kareem Abdelwahed

@kroaine，你的（max-width: 1565px）需要比你的（min-width: 1565px）小一个像素。因此，应该是（max-width: 1564px）（min-width: 1565px）。 - Carol McKay

即使在 max-width 和 min-width 中具有相同的值，它也能正常工作，我认为问题是另一个。 - user4994625

CSS覆盖将出现，不应该有问题，也许“width:100%; display:block;”应该与“.container”样式相辅相成。 - krozaine

媒体查询不会影响到body，而是文档宽度。 - ristapk

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

    }
}

- Srikanth Reddy