为什么我的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以外的其他查询。

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