1

I am new to using media queries and searched for this on google but i just found websites referring to this but no description of what they actually mean.

What is the difference between this: 

@media screen and (max-width: 767px),
screen and (max-device-width: 767px)

And: 

@media screen and (max-width: 767px)

What is the difference between these two? Does the first one target page content width and device width or all orientations (horizontal or vertical)? I am confused here.

ariel
  • 2,962
  • 7
  • 27
  • 31

1 Answers1

2

Assuming you're not asking about the difference between the media features width vs device-width, but rather the difference between the two media queries themselves: it's useful to know that the comma in the query functions as a logical OR. Thus, the first query says,

“If it's a screen with a max-width of 767px OR if it's a screen with a max-device-width of 767px...”

versus the second query which only queries max-width. In queries with a comma, the first will be evaluated, then the second, etc. If any of these is true, then the enclosed CSS will be applied.

See http://www.w3.org/TR/css3-mediaqueries/#media0

As far as how width and device-width work, PPK's http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html is still a very useful read as to why one might want to avoid using device-width in media queries, as well as a good explanation of the differences.

stephenhay
  • 2,824
  • 24
  • 25