Correct way to formulate media queries?

Question

While learning about media queries I often find two different ways of calling on these:

@media only screen 
  and (min-width: 768px) {
}

And

 @media only screen 
      and (min-device-width: 768px) {
    }

Most of the info I found was on the 'min-device-width' being the "correct" one, however when I just tried to implement it in my code, the 'min-device-width' did not work and the 'min-width' did. In the demos both work, but in theory I seem to be needing one or the other.

Why is this, and what is the correct way?

Answer 1

Both are valid media queries, but with different outcomes:

min-device-width refers to the width of the device

min-width refers to the width of the browser window (including the scroll bar!) and may therefore be smaller than min-device-width, as the browser doesn't necessarily covers the whole screen

edit: There are many more media queries (e.g. width for an exact width), but min-width and max-width are probably the most important ones for responsive design.