Wednesday, July 2, 2014

Media Queries for Devices


iPhone 4 
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {

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

}

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

}

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

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

}

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

}

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

}


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

}

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

}

No comments:

Post a Comment