Recently, I stumbled upon an interesting article discussing @media queries for standard devices. You can check it out here.
The article showcases different @media queries applicable to various devices. However, I found myself a bit puzzled. It includes examples 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 */
}
This has left me wondering, should I use all three of these @media queries or just one that covers both landscape and portrait orientations? Can someone please clarify the differences for me?