Media Queries is a new feature in CSS3 that allows you to write CSS styles for devices with different orientations and dimensions. It is very important for responsive web design that let the presentation of content be tailored to a specific range of output devices without having to change the content itself. Following is a list of CSS3 Media Queries for most common used devices that cover iPhone, iPad, Kindle, Android phone and more .
/* All Smartphones in portrait and landscape ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* YOUR STYLE GOES HERE */
}
/* All Smartphones in landscape ----------- */
@media only screen
and (min-width : 321px) {
/* YOUR STYLE GOES HERE */
}
/* All Smartphones in portrait ----------- */
@media only screen
and (max-width : 479px) {
/* YOUR STYLE GOES HERE */
}
/***** ANDROID DEVICES *****/
/* Android 240 X 320 ----------- */
@media only screen
and (max-width: 241px){
/* YOUR STYLE GOES HERE */
}
/* Android(Samsung Galaxy) in portrait 380 X 685 ----------- */
@media only screen
and (min-width: 375px)
and (max-width: 385px){
/* YOUR STYLE GOES HERE */
}
/* Android(Samsung Galaxy) in Landscape 685 X 380 ----------- */
@media only screen
and (min-width: 680px)
and (max-width: 690px){
/* YOUR STYLE GOES HERE */
}
/* Kindle Portrait 600 X 1024 ----------- */
@media only screen
and (min-width: 595px)
and (max-width: 610px){
/* YOUR STYLE GOES HERE */
}
/* Kindle Landscape 1024 X 600 ----------- */
@media only screen
and (min-width: 1000px)
and (max-width: 1030px){
/* YOUR STYLE GOES HERE */
}
/***** ALL GENERATION IPADS *****/
/* iPads in portrait and landscape----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* YOUR STYLE GOES HERE */
}
/* iPad in landscape----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* YOUR STYLE GOES HERE */
}
/* iPad in portrait----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait){
/* YOUR STYLE GOES HERE */
}
/***** Retina IPAD 3 & 4*****/
/* Retina iPad 3 & 4 in portrait and landscape----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}
/* Retina iPad 3 & 4 in landscape----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}
/* Retina iPad 3 & 4 in landscape----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}
/***** IPAD 1 & 2 (ALSO IPAD MINI)*****/
/* iPad 1 & 2 in portrait and landscape ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1){
/* YOUR STYLE GOES HERE */
}
/* iPad 1 & 2 in landscape ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {
/* YOUR STYLE GOES HERE */
}
/* iPad 1 & 2 in portrait ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1){
/* YOUR STYLE GOES HERE */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* YOUR STYLE GOES HERE */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* YOUR STYLE GOES HERE */
}
/* Only iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* YOUR STYLE GOES HERE */
}
/* Only iPhone 5 ----------- */
/* iPhone 5 (portrait) */
@media screen and (max-device-width: 568px) and (orientation: portrait) {
}
/* iPhone 5 (landscape) */
@media screen and (max-device-width: 568px) and (orientation: landscape) {
}Reference: CSS Media Queries For Common Devices and Design-Based Media Queries.
