为什么我的 CSS 媒体查询和样式不起作用

Question

我在我的样式表上创建了三个媒体查询。前两个没问题，但最后一个不行。我想知道为什么？

@media screen and (min-width: 50px) and (max-width: 600px){..styles..}
@media screen and (min-width: 600px) and (max-width: 800px){..styles..}
@media screen and (min-width: 800px) and (max-width: 1000px){..styles..}

Answer 1

我会猜测，因为您的查询重叠。

应该是：

@media screen and (min-width: 50px) and (max-width: 600px){..styles..}
@media screen and (min-width: 601px) and (max-width: 800px){..styles..}
@media screen and (min-width: 801px) and (max-width: 1000px){..styles..}

编辑：另外，第一个 min-width:50px 和最后一个 max-width:1000px 是不必要的。除非你的屏幕尺寸小于 50px，这是我无法想象的，或者你有另一个超出 1000px.

的查询

事实上，您可以删除整个第一个查询，只保留第二个和第三个。它会完成同样的事情。