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)....

if(screen.width < 420)
{
     ApplyStyle();
}

This concept of talking about min and max doesn't make any sense since the 'min-width' of something like a div element is a command not a question.

I know that the following is true when my screen goes below 420px...

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


}

I just don't know why because the max width is something I tell it to have. If I have told it to have something why is css checking it? Surely it already knows it.

I'm perhaps missing the grammer/context here. Can someone please explain?

I agree with you completely. As a programmer, `if(screen.width < 420)` makes SOOOO much more sense and is instantly understandable. — Jess, Mar 04 '14 at 03:54

score 20 · Accepted Answer · answered Aug 25 '13 at 18:57

20

min-width in media queries is not related to the min-width property you set on elements, those are two different things.

In media queries min-width: X is true if the viewport has a width greater or equal to X, effectively working as screen.width >= X. Obviously max-width would then be equal to screen.width <= X

To me it makes perfect sense, if you read @media screen and (max-width:420px) as a screen with a maximum width of 420px, so anything from 0 to 420px

answered Aug 25 '13 at 18:57

omma2289

54,161
8
64
68

I had to come back to this and realise yours was actually the right answer. That last sentence nailed it for me. Thanks! – Exitos Dec 07 '13 at 00:07
Yeah sorry I just got lost in all of the original stuff then honed in on the last sentence here. No hard feelings I hope! – Exitos Dec 07 '13 at 00:24

Josh Crozier · Answer 2 · 2013-08-25T18:12:18.193

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.

score 1 · Answer 3 · edited Nov 02 '13 at 21:58

1

The confusion here is that there is both a min-width CSS property and media query with the same name:

@media (min-width: 420px) {...} /* This is read-only and is set to screen size */

.element { min-width: 420px; ...} /* This is setting a property of the selected element */

edited Nov 02 '13 at 21:58

Adam Jenkins

51,445
11
72
100

answered Aug 25 '13 at 18:50

Owlvark

1,763
17
28

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

3 Answers3

Linked