FIX @media Queries / @media 代码为每个单独的屏幕尺寸

Question

要修复的网站问题：

我试图弄清楚为什么我的一些 @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 较大的屏幕尺寸。

但是，我可以为每个单独的@media 代码单独更改标题背景“#header {background:url(../img/super”，而不会错误地更改所有@media / SCREEN 上的背景大小的。

我怎样才能让 css @media 代码对它自己的 @media / SCREEN SIZE 完全唯一，而不影响其他 @media / SCREEN SIZE？

我怎样才能为小尺寸手机添加最终的@media（网站目前显示所有在小尺寸手机上都搞砸了）？

告诉我答案。祝你一切顺利！

Answer 1

如果您需要不重叠的断点，您将不得不这样做

/*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) { ... }