css - 针对每个单独的屏幕尺寸修复@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 上的背景尺码。

如何在不影响其他@media/SCREEN SIZE 的情况下，让 css @media 代码对其自己的@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) { ... }