Skip to content

Instantly share code, notes, and snippets.

@bravokeyl
Last active August 29, 2015 14:15
Show Gist options
  • Save bravokeyl/8ad95e935aa6ebf91bc6 to your computer and use it in GitHub Desktop.
Save bravokeyl/8ad95e935aa6ebf91bc6 to your computer and use it in GitHub Desktop.
Quick Media Queries
/*iPad Group */
/*iPad both oreintations */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
}
/*iPad Landscape */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES GO HERE */}
/*iPad Potrait */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }
/*Retina display taken in to account */
/*iPad 3 & 4 only */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}
/*iPad 3 & 4 Landscape*/
@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 */}
/*iPad 3 & 4 Portrait*/
@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 */ }
/*Also iPad Mini */
/*iPad 1 & 2 only*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1){ /* STYLES GO HERE */}
/*iPad 1 & 2 Landsacpe*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */}
/*iPad 1 & 2 Potrait*/
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */ }
/*iPhone 6 Group */
/*iPhone 6 */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {
}
/*iPhone 6 Landscape*/
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) { /* STYLES GO HERE */}
/*iPhone 6 Portrait*/
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) { /* STYLES GO HERE */ }
/*iPhone 6 Plus */
@media only screen
and (min-device-width : 540px)
and (max-device-width : 960px) {
}
/*iPhone 6 Plus Landscape */
@media only screen
and (min-device-width : 540px)
and (max-device-width : 960px)
and (orientation : landscape) { /* STYLES GO HERE */}
/*iPhone 6 Plud Potrait */
@media only screen
and (min-device-width : 540px)
and (max-device-width : 960px)
and (orientation : portrait) { /* STYLES GO HERE */ }
/*iPhone 5 & 5S Group*/
/*iPhone 5 & 5S */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
}
/*iPhone 5 & 5S Landscape*/
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) { /* STYLES GO HERE */}
/*iPhone 5 & 5S Potrait*/
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) { /* STYLES GO HERE */ }
/*iPhone 2G, 3G, 4, 4S */
/*iPhone 2G, 3G, 4, 4S */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) { /* STYLES GO HERE */}
/*Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) { /* STYLES GO HERE */}
/*Potrait*/
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait) { /* STYLES GO HERE */ }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment