How to detect different devices by using media queries

The next list of media queries are necessary to detect several devices (even in portrait and landscape orientation), thanks to CSS Tricks:

/* 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 */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@mediaonly screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

And this an extra:

Nowadays, Bootstrap is one of the most used CSS frameworks and it includes a responsive version called Bootstrap Responsive, you could download this from its official website. Bootstrap Responsive uses the next media queries in order to change the layout of your site:

@media (min-width: 768px) and (max-width: 979px) {
}
@media (max-width: 767px) {
}
@media (min-width: 1200px) {
}
@media (max-width: 480px) {
}
@media (min-width: 980px) {
}

Thanks for reading!

Be happy with your code

—

Alex Arriaga