Pondering the meaning of these media queries…

Media Queries Explained

Ever since I started using media queries, I’ve had difficulty remembering the differences between max-width and min-width.

I’ve always had to slow down in order to spell it out in my head because I found the naming convention to be confusing. While some might disagree with me, It doesn’t hurt to spell it out in plain English…and with four visual examples. It’s something I wish I had seen when I first started using media queries.

max-width

@media (max-width: 480px) {…}

If the device width is less than or equal to the value in the expression, then the CSS inside the braces will be parsed and executed. So if the device width is 380px, this condition will return true and your CSS will be applied.

Example 1: max-width: 480px will return true when the device width is 380px.
Example 1
Example 2: max-width: 480px will return false when the device width is 500px.
Example 2

min-width

@media (min-width: 480px) {…}

If the device width is greater than or equal to the value passed in, then the CSS inside the braces will be parsed and executed. So if the device width is 580px, this condition will return false and your CSS will not be applied.

Example 3: min-width: 480px will return true when the device width is 500px.
Example 3
Example 4: min-width: 480px will return false when the device width is 380px.
Example 4