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