Created
December 27, 2013 20:15
-
-
Save d0nkeyBOB/8152042 to your computer and use it in GitHub Desktop.
Media Queries from http://code-tricks.com/css-media-queries-for-common-devices/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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 */ | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment