要修复的网站问题：
我试图找出为什么我的一些@media查询重叠。如果查看我的代码，您可以看到为每个设备维度标记了@media查询。
@media SCREEN SIZE: MASSIVE
@media SCREEN SIZE: LARGE
@media SCREEN SIZE: MEDIUM
@media SCREEN SIZE: IPAD
@media SCREEN SIZE: SMALL TABLET
目标是能够为每个独特的@media / SCREEN SIZE更改字体大小和图像大小。
问题：出于某种原因，当我在“屏幕大小：中等”上更改图像大小或文本大小时，它也适用于所有其他@media更大屏幕大小的更改。
但是，我可以单独更改标题背景“#header {background：url（../ img / super”），对于每个@media代码都没问题，而不会错误地更改所有@media / SCREEN的背景SIZE's。
如何在不影响其他@media / SCREEN SIZE的情况下使css @media代码完全独特于@media / SCREEN SIZE？
如何在小手机尺寸上添加最终的@media（网站目前显示小手机尺寸全部搞砸了）？
让我知道答案。你一切顺利！
答案 0 :(得分：0)
如果您需要非重叠断点，则必须执行此类操作
/*Small*/
@media (max-width: 499px) { ... }
/*Medium*/
@media (min-width: 500px) and (max-width: 999px) { ... }
/*Big*/
@media (min-width: 1000px) and (max-width: 1499px) { ... }
/*Large*/
@media (min-width: 1500px) { ... }