The min/max-width media query doesn't make grammatical sense

Question

I\'m finding the concept of the (min-width/max-width) media query a bit confusing.

Naturally if I was to design a media query I would want to say (in pseudo-code)....

Answer 1

Here is a simple example, hopefully it helps..

Say we have a website with the following media queries:

/* #1- Large desktop */
@media (min-width: 980px) { ... }

/* #2- Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* #3- Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* #4- Landscape phones and down */
@media (max-width: 480px) { ... }

If the screen size of the browser is 1200px, query #1 will be satisfied, as the minimum width of the browser has to be 980px for this query to be displayed.

Lets say we resize the browser now, and bring it all the way down to 250px.. query #4 is satisfied as the MAX is 480px..

Here is a simple translation of the queries..

@media (min-width: 980px) { ... }

Display if screen is greater than or equal to 980px

@media (min-width: 768px) and (max-width: 979px) { ... }

Display if screen is greater than or equal to 768px and less than or equal to 978px

@media (max-width: 767px) { ... }

Display if screen is greater than 480px and less than or equal to 767px.

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

Display if screen is less than or equal to 480px

Using these queries, you will always have a result, as one query is always satisfied.