CSS Media Queries for All The Common Devices

Last updated Jan 16, 2018

Media queries are mainly for responsive web design. Media queries are css3 conditional statement used to adapt design on different screens. It is similar to if..else conditions. If you want to create response design with good user experience then you must have to code for multiple devices that’s why you should aware about media queries for all the common devices your user’s are using to access your website so they feel good user experience will increase returning traffic on your website. CSS Media queries are supported in Internet Explorer (IE) 9+, Firefox 3.5+, Safari 3+, Opera 7+, as well as on most modern smartphones and other screen-based devices. Although older versions of IE don’t support media queries.

Here I am going to share media queries for common devices.

/* ------ Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles go here.. */
}
/* ------ Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles go here.. */
}
 
/* ------ Smartphones (portrait and landscape) ----- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles go here.. */
}
 
/* ------ Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles go here.. */
}
 
/* ------ Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles go here.. */
}
 
/* ------ iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles go here.. */
}
 
/* ------ iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles go here.. */
}
 
/* ------ iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles go here.. */
}
/* ------ iPad 3 ------ */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles go here.. */
}
 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles go here.. */
}
 
/* ------ iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles go here.. */
}
 
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles go here.. */
}
 
/* ------ iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles go here.. */
}
 
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles go here.. */
}
 
/* ------ iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles go here.. */
}
 
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles go here.. */
}
 
/* ------ Samsung Galaxy S3,S4,S5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles go here.. */
}
 
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles go here.. */
}

You can create so many media queries as per your need just get the screen size and write the conditions for the selected screen.

Bootstrap CSS