CSS Media Queries for All The Common Devices

by Posted on

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.


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

}

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

}
 

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

}
 

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

}
 

@media only screen and (max-width : 320px) {

}
 

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

}
 

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

}
 

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {

}
 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {

}
 

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){

}
 
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){

}
 

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){

}
 
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){

}
 

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){

}
 
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){

}
 

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){

}
 
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){

}

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



Published by admin