Question

I came across this article:

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

It shows various @media queries, which I think are very usefully. But I am slightly confused. It includes things like:

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

And I find it confusing, am I supposed to use 3 of these @media queries or just one that covers landscape and portrait. Can someone explain the difference for me?

Answer 1

in first query you define styles for both portrait and landscape.
in second media query you just set styles you want to be applied when smart phone is in landscape mode
and last query is where you’re going to enter styles for smart phone where its in portrait mode .
for testing its better to use a responsive design resizing tool like http://lab.maltewassermann.com/viewport-resizer/