-
-
Save chathudan/cc55fa8c5bdba63edd425ffed4a47cef to your computer and use it in GitHub Desktop.
Device Specific CSS Media Queries Collection
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
| /* | |
| Based on: | |
| 1. http://stephen.io/mediaqueries | |
| 2. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ | |
| */ | |
| /* iPhone X in portrait & landscape */ | |
| @media only screen | |
| and (min-device-width : 375px) | |
| and (max-device-width : 812px) | |
| and (-webkit-device-pixel-ratio : 3) { | |
| } | |
| /* iPhone X in landscape */ | |
| @media only screen | |
| and (min-device-width : 375px) | |
| and (max-device-width : 812px) | |
| and (-webkit-device-pixel-ratio : 3) | |
| and (orientation : landscape) { | |
| } | |
| /* iPhone X in portrait */ | |
| @media only screen | |
| and (min-device-width : 375px) | |
| and (max-device-width : 812px) | |
| and (-webkit-device-pixel-ratio : 3) | |
| and (orientation : portrait) { | |
| } | |
| /* iPhone 6, 7, & 8 in portrait & landscape */ | |
| @media only screen | |
| and (min-device-width : 375px) | |
| and (max-device-width : 667px) { | |
| } | |
| /* iPhone 6, 7, & 8 in landscape */ | |
| @media only screen | |
| and (min-device-width : 375px) | |
| and (max-device-width : 667px) | |
| and (orientation : landscape) { | |
| } | |
| /* iPhone 6, 7, & 8 in portrait */ | |
| @media only screen | |
| and (min-device-width : 375px) | |
| and (max-device-width : 667px) | |
| and (orientation : portrait) { | |
| } | |
| /* iPhone 6, 7, & 8 Plus in portrait & landscape */ | |
| @media only screen | |
| and (min-device-width : 414px) | |
| and (max-device-width : 736px) { | |
| } | |
| /* iPhone 6, 7, & 8 Plus in landscape */ | |
| @media only screen | |
| and (min-device-width : 414px) | |
| and (max-device-width : 736px) | |
| and (orientation : landscape) { | |
| } | |
| /* iPhone 6, 7, & 8 Plus in portrait */ | |
| @media only screen | |
| and (min-device-width : 414px) | |
| and (max-device-width : 736px) | |
| and (orientation : portrait) { | |
| } | |
| /* iPhone 6 in portrait & landscape */ | |
| @media only screen | |
| and (min-device-width : 375px) | |
| and (max-device-width : 667px) { | |
| } | |
| /* iPhone 6 in landscape */ | |
| @media only screen | |
| and (min-device-width : 375px) | |
| and (max-device-width : 667px) | |
| and (orientation : landscape) { | |
| } | |
| /* iPhone 6 in portrait */ | |
| @media only screen | |
| and (min-device-width : 375px) | |
| and (max-device-width : 667px) | |
| and (orientation : portrait) { | |
| } | |
| /* iPhone 6 Plus in portrait & landscape */ | |
| @media only screen | |
| and (min-device-width : 414px) | |
| and (max-device-width : 736px) { | |
| } | |
| /* iPhone 6 Plus in landscape */ | |
| @media only screen | |
| and (min-device-width : 414px) | |
| and (max-device-width : 736px) | |
| and (orientation : landscape) { | |
| } | |
| /* iPhone 6 Plus in portrait */ | |
| @media only screen | |
| and (min-device-width : 414px) | |
| and (max-device-width : 736px) | |
| and (orientation : portrait) { | |
| } | |
| /* iPhone 5 & 5S in portrait & landscape */ | |
| @media only screen | |
| and (min-device-width : 320px) | |
| and (max-device-width : 568px) { | |
| } | |
| /* iPhone 5 & 5S in landscape */ | |
| @media only screen | |
| and (min-device-width : 320px) | |
| and (max-device-width : 568px) | |
| and (orientation : landscape) { | |
| } | |
| /* iPhone 5 & 5S in portrait */ | |
| @media only screen | |
| and (min-device-width : 320px) | |
| and (max-device-width : 568px) | |
| and (orientation : portrait) { | |
| } | |
| /* | |
| iPhone 2G, 3G, 4, 4S Media Queries | |
| It's noteworthy that these media queries are also the same for iPod Touch generations 1-4. | |
| */ | |
| /* iPhone 2G-4S in portrait & landscape */ | |
| @media only screen | |
| and (min-device-width : 320px) | |
| and (max-device-width : 480px) { | |
| } | |
| /* iPhone 2G-4S in landscape */ | |
| @media only screen | |
| and (min-device-width : 320px) | |
| and (max-device-width : 480px) | |
| and (orientation : landscape) { | |
| } | |
| /* iPhone 2G-4S in portrait */ | |
| @media only screen | |
| and (min-device-width : 320px) | |
| and (max-device-width : 480px) | |
| and (orientation : portrait) { | |
| } | |
| /* iPad in portrait & landscape */ | |
| @media only screen | |
| and (min-device-width : 768px) | |
| and (max-device-width : 1024px) { | |
| } | |
| /* iPad in landscape */ | |
| @media only screen | |
| and (min-device-width : 768px) | |
| and (max-device-width : 1024px) | |
| and (orientation : landscape) { | |
| } | |
| /* iPad in portrait */ | |
| @media only screen | |
| and (min-device-width : 768px) | |
| and (max-device-width : 1024px) | |
| and (orientation : portrait) { | |
| } | |
| /* Galaxy S3 portrait and landscape */ | |
| @media screen | |
| and (device-width: 320px) | |
| and (device-height: 640px) | |
| and (-webkit-device-pixel-ratio: 2) { | |
| } | |
| /* Galaxy S3 portrait */ | |
| @media screen | |
| and (device-width: 320px) | |
| and (device-height: 640px) | |
| and (-webkit-device-pixel-ratio: 2) | |
| and (orientation: portrait) { | |
| } | |
| /* Galaxy S3 landscape */ | |
| @media screen | |
| and (device-width: 320px) | |
| and (device-height: 640px) | |
| and (-webkit-device-pixel-ratio: 2) | |
| and (orientation: landscape) { | |
| } | |
| /* Galaxy S4 portrait and landscape */ | |
| @media screen | |
| and (device-width: 320px) | |
| and (device-height: 640px) | |
| and (-webkit-device-pixel-ratio: 3) { | |
| } | |
| /* Galaxy S4 portrait */ | |
| @media screen | |
| and (device-width: 320px) | |
| and (device-height: 640px) | |
| and (-webkit-device-pixel-ratio: 3) | |
| and (orientation: portrait) { | |
| } | |
| /* Galaxy S4 landscape */ | |
| @media screen | |
| and (device-width: 320px) | |
| and (device-height: 640px) | |
| and (-webkit-device-pixel-ratio: 3) | |
| and (orientation: landscape) { | |
| } | |
| /* Galaxy S5 portrait and landscape */ | |
| @media screen | |
| and (device-width: 360px) | |
| and (device-height: 640px) | |
| and (-webkit-device-pixel-ratio: 3) { | |
| } | |
| /* Galaxy S5 portrait */ | |
| @media screen | |
| and (device-width: 360px) | |
| and (device-height: 640px) | |
| and (-webkit-device-pixel-ratio: 3) | |
| and (orientation: portrait) { | |
| } | |
| /* Galaxy S5 landscape */ | |
| @media screen | |
| and (device-width: 360px) | |
| and (device-height: 640px) | |
| and (-webkit-device-pixel-ratio: 3) | |
| and (orientation: landscape) { | |
| } | |
| /* HTC One portrait and landscape */ | |
| @media screen | |
| and (device-width: 360px) | |
| and (device-height: 640px) | |
| and (-webkit-device-pixel-ratio: 3) { | |
| } | |
| /* HTC One portrait */ | |
| @media screen | |
| and (device-width: 360px) | |
| and (device-height: 640px) | |
| and (-webkit-device-pixel-ratio: 3) | |
| and (orientation: portrait) { | |
| } | |
| /* HTC One landscape */ | |
| @media screen | |
| and (device-width: 360px) | |
| and (device-height: 640px) | |
| and (-webkit-device-pixel-ratio: 3) | |
| and (orientation: landscape) { | |
| } | |
| /* | |
| iPad 3 & 4 Media Queries | |
| If you're looking to target only 3rd and 4th generation Retina iPads | |
| (or tablets with similar resolution) to add @2x graphics, | |
| or other features for the tablet's Retina display, use the following media queries. | |
| */ | |
| /* Retina iPad in portrait & landscape */ | |
| @media only screen | |
| and (min-device-width : 768px) | |
| and (max-device-width : 1024px) | |
| and (-webkit-min-device-pixel-ratio: 2) { | |
| } | |
| /* Retina iPad 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) { | |
| } | |
| /* Retina iPad in portrait */ | |
| @media only screen | |
| and (min-device-width : 768px) | |
| and (max-device-width : 1024px) | |
| and (orientation : portrait) | |
| and (-webkit-min-device-pixel-ratio: 2) { | |
| } | |
| /* | |
| iPad 1 & 2 Media Queries | |
| If you're looking to supply different graphics or choose different typography | |
| for the lower resolution iPad display, the media queries below will work | |
| like a charm in your responsive design! | |
| */ | |
| /* iPad 1 & 2 in portrait & landscape */ | |
| @media only screen | |
| and (min-device-width : 768px) | |
| and (max-device-width : 1024px) | |
| and (-webkit-min-device-pixel-ratio: 1) { | |
| } | |
| /* 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) { | |
| } | |
| /* 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) { | |
| } | |
| /* iPad mini in portrait & landscape */ | |
| @media only screen | |
| and (min-device-width : 768px) | |
| and (max-device-width : 1024px) | |
| and (-webkit-min-device-pixel-ratio: 1) { | |
| } | |
| /* iPad mini 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) { | |
| } | |
| /* iPad mini 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) { | |
| } | |
| /* Galaxy Tab 10.1 portrait and landscape */ | |
| @media | |
| (min-device-width: 800px) | |
| and (max-device-width: 1280px) { | |
| } | |
| /* Galaxy Tab 10.1 portrait */ | |
| @media | |
| (max-device-width: 800px) | |
| and (orientation: portrait) { | |
| } | |
| /* Galaxy Tab 10.1 landscape */ | |
| @media | |
| (max-device-width: 1280px) | |
| and (orientation: landscape) { | |
| } | |
| /* Asus Nexus 7 portrait and landscape */ | |
| @media screen | |
| and (device-width: 601px) | |
| and (device-height: 906px) | |
| and (-webkit-min-device-pixel-ratio: 1.331) | |
| and (-webkit-max-device-pixel-ratio: 1.332) { | |
| } | |
| /* Asus Nexus 7 portrait */ | |
| @media screen | |
| and (device-width: 601px) | |
| and (device-height: 906px) | |
| and (-webkit-min-device-pixel-ratio: 1.331) | |
| and (-webkit-max-device-pixel-ratio: 1.332) | |
| and (orientation: portrait) { | |
| } | |
| /* Asus Nexus 7 landscape */ | |
| @media screen | |
| and (device-width: 601px) | |
| and (device-height: 906px) | |
| and (-webkit-min-device-pixel-ratio: 1.331) | |
| and (-webkit-max-device-pixel-ratio: 1.332) | |
| and (orientation: landscape) { | |
| } | |
| /* Kindle Fire HD 7" portrait and landscape */ | |
| @media only screen | |
| and (min-device-width: 800px) | |
| and (max-device-width: 1280px) | |
| and (-webkit-min-device-pixel-ratio: 1.5) { | |
| } | |
| /* Kindle Fire HD 7" portrait */ | |
| @media only screen | |
| and (min-device-width: 800px) | |
| and (max-device-width: 1280px) | |
| and (-webkit-min-device-pixel-ratio: 1.5) | |
| and (orientation: portrait) { | |
| } | |
| /* Kindle Fire HD 7" landscape */ | |
| @media only screen | |
| and (min-device-width: 800px) | |
| and (max-device-width: 1280px) | |
| and (-webkit-min-device-pixel-ratio: 1.5) | |
| and (orientation: landscape) { | |
| } | |
| /* Kindle Fire HD 8.9" portrait and landscape */ | |
| @media only screen | |
| and (min-device-width: 1200px) | |
| and (max-device-width: 1600px) | |
| and (-webkit-min-device-pixel-ratio: 1.5) { | |
| } | |
| /* Kindle Fire HD 8.9" portrait */ | |
| @media only screen | |
| and (min-device-width: 1200px) | |
| and (max-device-width: 1600px) | |
| and (-webkit-min-device-pixel-ratio: 1.5) | |
| and (orientation: portrait) { | |
| } | |
| /* Kindle Fire HD 8.9" landscape */ | |
| @media only screen | |
| and (min-device-width: 1200px) | |
| and (max-device-width: 1600px) | |
| and (-webkit-min-device-pixel-ratio: 1.5) | |
| and (orientation: landscape) { | |
| } | |
| /* Laptops non-retina screens */ | |
| @media screen | |
| and (min-device-width: 1200px) | |
| and (max-device-width: 1600px) | |
| and (-webkit-min-device-pixel-ratio: 1) { | |
| } | |
| /* Laptops retina screens */ | |
| @media screen | |
| and (min-device-width: 1200px) | |
| and (max-device-width: 1600px) | |
| and (-webkit-min-device-pixel-ratio: 2) | |
| and (min-resolution: 192dpi) { | |
| } | |
| /* Apple Watch */ | |
| @media | |
| (max-device-width: 42mm) | |
| and (min-device-width: 38mm) { | |
| } | |
| /* Moto 360 Watch */ | |
| @media | |
| (max-device-width: 218px) | |
| and (max-device-height: 281px) { | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment