CSS Media Queries For Common Devices

[php]/* 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 */
}
[/php]

Leave a Reply