如果一个媒体查询没有CSS格式，则html内容会捕获另一个媒体查询？

Question

I'm trying to do my first project with media queries, and I'm facing a strange issue.

I started to develop for mobile, using this media query:

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

Then, I develop for larger mobile devices with:

@media screen and (min-width:480px) and (max-width:600px) {}

Then for small tablets:

@media screen and (min-width:601px) and (max-width:720px) {}

And larger tablets:

@media screen and (min-width:721px) and (max-width:980px)

Then for laptop:

@media screen and (min-width:981px) {}

Everything works fine so far, but now I'm doing this media query @media screen and (min-width:1200px) {} for larger laptops, and when I resize the browser up to 1200, and If I don't have nothing inside this media query, my content rather than stay unformatted, what happens is that my content catches the previous media query: @media screen and (min-width:981px) {} .

Is this is normal?? If one media query doesn't have CSS formatting, the content catches another media query?

Answer 1

If there is nothing inside a media query, then the browser doesn't need to change anything.

Since anything that is at least 1200px ( min-width:1200px ) is necessarily also at least 981px ( min-width:981px ), anything that applies in the latter will apply in the former if nothing is changed. In a way, you could say that the browser "catches" the earlier media query, but it really is catching both ; there is just nothing in the second to override the first so the styles remain the same.

This is expected behavior.

The reason why your mobile and tablet media queries don't apply on laptops (and desktops) is because you have specified max-width , unlike your laptop media query, which only has a min-width condition.