Media Query Syntax

[knystrom18]

I'm teaching myself responsive web design, but I've run into some obstacles with media queries. I also have a few questions about them: 1. Can a query be above what it's acting on in a stylesheet? What if at the point the query is, the CSS selector it's acting on hasn't been loaded/parsed yet? 2. Do the style rules that apply when a query is active all have to be contained in one query, or can there be separate queries? For example, this:

@media screen and (max-width: 768px) {  div#first {   rules...  }   div#second {   rules  }}

Or:

@media screen and (max-width: 768px) {  div#first {   rules...  }} @media screen and (max-width: 768px) {  div#second {   rules...  }}

3. Do the rules applied to a CSS selector continue to be applied while a query is active? For example, will the two widths conflict?

div#first {  width: 960px;} @media screen and (max-width: 768px) {  div#first {   width: 768px;  }}

Thanks for the help, and it's good to be back!

[knystrom18]

This must be a nasty post...

[thescientist]

have you tried playing around with your own questions and observing the results?

[boen_robot]

1. I don't get it... code example for that one?2. Try it! I believe the two will merge (with the later taking precedence in cases of conflicts), but I'm not sure. I'm basing this assumption on the fact this is what happens when you have the same selector twice.3. Yes... that's kind'a the whole point of media queries - for them to always apply on a match, and stop applying if the media changes. In your example, if the media query matches, it will take precedence over the default rule.

[knystrom18]

I'll play around with them some more then. Thanks for the replies. So, boen_robot, just to be clear, if a width is defined as 1,000px, but a media query applies with a width of 500px, the 1,000px width is completely "forgotten" until the media query no longer applies?

[boen_robot]

I'll play around with them some more then. Thanks for the replies. So, boen_robot, just to be clear, if a width is defined as 1,000px, but a media query applies with a width of 500px, the 1,000px width is completely "forgotten" until the media query no longer applies?

Yes, unless the 1000px width is also defined in a matching media query. In that case, both widths are treated with the same priority, and the one later in the code wins.For example:

width: 1024px;@media screen and (max-width: 1000px) {width: 1000px;}@media screen and (aspect-ratio: 4/3) {width: 768px;}

If both queries match, the width will be 768px, and the 1000px and 1024px will be "forgotten" until the second query no longer matches. If only the first matches, the 1024px is forgotten until neither media query applies.

[knystrom18]

Awesome. Thanks for your help boen.