Media Query Rules

Hi!
I’m reviewing media queries in CSS and this lesson got me a bit confused.

The following rule is applied for screen sizes between 320 pixels and 480 pixels.

@media only screen and (min-width: 320px) and (max-width: 480px) {
    /* ruleset for 320px - 480px */
}

However, the same code (which should apply the same rule), can be written separately but in the lesson the way it is explained how it works confused me a bit.

@media only screen and (min-width: 320px) { 
    /* ruleset for >= 320px */
}
@media only screen and (min-width: 480px) { 
    /* ruleset for >= 480px */
}

“The first media will apply CSS rules when the size of the screen meets or exceeds 320 pixels (…) The second media query will then apply CSS rules when the size of the screen meets or exceeds 480 pixels”

So, in this case I understand both rules apply for screen sizes larger than the defined pixels dimensions, but in the one line @media code it says the rule applies for devices between the defined width sizes. Hence, they are not larger than what it’s stated.

It says both work the same way but how it is explained seems like they work differently.

Would appreciate your thoughts! Thanks.

Try using your browser features to visualize how the dimensions work. Once you open up the inspect element, you can actually tinker with the dimensions explicitly (see screenshots below). The media min-max width concept is easier to get once you do this, as you can see the main ways people will see your page (don’t neglect to try the rotated phones and tablets!).

The way I personally got comfortable with this was just having a page whose layout I had already drawn on paper (with mobile versions as well) – and then trying to make it look exactly like I wanted for each possibility (phone, rotated tablet, etc.). Sometimes I would only get 1 new one done in a day (or less!), but once I got the hang of it, it was smooth(er) sailing :sweat_smile:.

Depending on how you structure your layout, sometimes there are grey areas where if a browser gets resized or rotated, everything falls apart, so you can add small queries to target those instances as well.

I personally like working with Firefox for css, but Chrome should give you a lot of tools too.
Screen Shot 2020-07-01 at 11.07.04 AM
Screen Shot 2020-07-01 at 11.07.12 AM

Hopefully this helps!