当我调整浏览器大小而不是在移动设备上时，媒体查询工作正常

如何解决当我调整浏览器大小而不是在移动设备上时，媒体查询工作正常

我一直致力于使网站具有响应性，我只通过调整浏览器的大小对其进行了测试，但是当我认为我已经完成时，我在移动设备上对其进行了测试，但它根本不起作用。这是我的媒体查询的一些示例：

@media screen and (max-width:645px) {}

@media screen and (max-width:1366px) {}

@media screen and (max-width:1024px) {}

@media screen and (max-width:980px) {}

解决方法

不要使用 max-width，而是使用 max-width & min-width。这样它就会工作得很好。

@media screen and (max-width: 1366px) and (min-width: 1024px) {}

@media screen and (max-width: 1024px) and (min-width: 980px) {}

@media screen and (max-width: 980px) and (min-width: 645px) {}

@media screen and (max-width: 645px) {} This is mobile first