Created
September 16, 2019 08:46
-
-
Save esedic/8b63fb6d1adec67ffaaff03f3cc3f58b to your computer and use it in GitHub Desktop.
Media Queries for Standard 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
/*! Phones and Handhelds */ | |
/*! ======================================================================== */ | |
/* iPhones */ | |
/* ----------- iPhone 4 and 4S ----------- */ | |
/* Portrait and Landscape */ | |
@media only screen | |
and (min-device-width: 320px) | |
and (max-device-width: 480px) | |
and (-webkit-min-device-pixel-ratio: 2) { | |
} | |
/* Portrait */ | |
@media only screen | |
and (min-device-width: 320px) | |
and (max-device-width: 480px) | |
and (-webkit-min-device-pixel-ratio: 2) | |
and (orientation: portrait) { | |
} | |
/* Landscape */ | |
@media only screen | |
and (min-device-width: 320px) | |
and (max-device-width: 480px) | |
and (-webkit-min-device-pixel-ratio: 2) | |
and (orientation: landscape) { | |
} | |
/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */ | |
/* Portrait and Landscape */ | |
@media only screen | |
and (min-device-width: 320px) | |
and (max-device-width: 568px) | |
and (-webkit-min-device-pixel-ratio: 2) { | |
} | |
/* Portrait */ | |
@media only screen | |
and (min-device-width: 320px) | |
and (max-device-width: 568px) | |
and (-webkit-min-device-pixel-ratio: 2) | |
and (orientation: portrait) { | |
} | |
/* Landscape */ | |
@media only screen | |
and (min-device-width: 320px) | |
and (max-device-width: 568px) | |
and (-webkit-min-device-pixel-ratio: 2) | |
and (orientation: landscape) { | |
} | |
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */ | |
/* Portrait and Landscape */ | |
@media only screen | |
and (min-device-width: 375px) | |
and (max-device-width: 667px) | |
and (-webkit-min-device-pixel-ratio: 2) { | |
} | |
/* Portrait */ | |
@media only screen | |
and (min-device-width: 375px) | |
and (max-device-width: 667px) | |
and (-webkit-min-device-pixel-ratio: 2) | |
and (orientation: portrait) { | |
} | |
/* Landscape */ | |
@media only screen | |
and (min-device-width: 375px) | |
and (max-device-width: 667px) | |
and (-webkit-min-device-pixel-ratio: 2) | |
and (orientation: landscape) { | |
} | |
/* ----------- iPhone 6+, 7+ and 8+ ----------- */ | |
/* Portrait and Landscape */ | |
@media only screen | |
and (min-device-width: 414px) | |
and (max-device-width: 736px) | |
and (-webkit-min-device-pixel-ratio: 3) { | |
} | |
/* Portrait */ | |
@media only screen | |
and (min-device-width: 414px) | |
and (max-device-width: 736px) | |
and (-webkit-min-device-pixel-ratio: 3) | |
and (orientation: portrait) { | |
} | |
/* Landscape */ | |
@media only screen | |
and (min-device-width: 414px) | |
and (max-device-width: 736px) | |
and (-webkit-min-device-pixel-ratio: 3) | |
and (orientation: landscape) { | |
} | |
/* ----------- iPhone X ----------- */ | |
/* Portrait and Landscape */ | |
@media only screen | |
and (min-device-width: 375px) | |
and (max-device-width: 812px) | |
and (-webkit-min-device-pixel-ratio: 3) { | |
} | |
/* Portrait */ | |
@media only screen | |
and (min-device-width: 375px) | |
and (max-device-width: 812px) | |
and (-webkit-min-device-pixel-ratio: 3) | |
and (orientation: portrait) { | |
} | |
/* Landscape */ | |
@media only screen | |
and (min-device-width: 375px) | |
and (max-device-width: 812px) | |
and (-webkit-min-device-pixel-ratio: 3) | |
and (orientation: landscape) { | |
} | |
/* Galaxy Phones | |
/* ----------- Galaxy S3 ----------- */ | |
/* Portrait and Landscape */ | |
@media screen | |
and (device-width: 360px) | |
and (device-height: 640px) | |
and (-webkit-device-pixel-ratio: 2) { | |
} | |
/* Portrait */ | |
@media screen | |
and (device-width: 320px) | |
and (device-height: 640px) | |
and (-webkit-device-pixel-ratio: 2) | |
and (orientation: portrait) { | |
} | |
/* Landscape */ | |
@media screen | |
and (device-width: 320px) | |
and (device-height: 640px) | |
and (-webkit-device-pixel-ratio: 2) | |
and (orientation: landscape) { | |
} | |
/* ----------- Galaxy S4, S5 and Note 3 ----------- */ | |
/* Portrait and Landscape */ | |
@media screen | |
and (device-width: 320px) | |
and (device-height: 640px) | |
and (-webkit-device-pixel-ratio: 3) { | |
} | |
/* Portrait */ | |
@media screen | |
and (device-width: 320px) | |
and (device-height: 640px) | |
and (-webkit-device-pixel-ratio: 3) | |
and (orientation: portrait) { | |
} | |
/* Landscape */ | |
@media screen | |
and (device-width: 320px) | |
and (device-height: 640px) | |
and (-webkit-device-pixel-ratio: 3) | |
and (orientation: landscape) { | |
} | |
/* ----------- Galaxy S6 ----------- */ | |
/* Portrait and Landscape */ | |
@media screen | |
and (device-width: 360px) | |
and (device-height: 640px) | |
and (-webkit-device-pixel-ratio: 4) { | |
} | |
/* Portrait */ | |
@media screen | |
and (device-width: 360px) | |
and (device-height: 640px) | |
and (-webkit-device-pixel-ratio: 4) | |
and (orientation: portrait) { | |
} | |
/* Landscape */ | |
@media screen | |
and (device-width: 360px) | |
and (device-height: 640px) | |
and (-webkit-device-pixel-ratio: 4) | |
and (orientation: landscape) { | |
} | |
/* Google Pixel | |
/* ----------- Google Pixel ----------- */ | |
/* Portrait and Landscape */ | |
@media screen | |
and (device-width: 360px) | |
and (device-height: 640px) | |
and (-webkit-device-pixel-ratio: 3) { | |
} | |
/* Portrait */ | |
@media screen | |
and (device-width: 360px) | |
and (device-height: 640px) | |
and (-webkit-device-pixel-ratio: 3) | |
and (orientation: portrait) { | |
} | |
/* Landscape */ | |
@media screen | |
and (device-width: 360px) | |
and (device-height: 640px) | |
and (-webkit-device-pixel-ratio: 3) | |
and (orientation: landscape) { | |
} | |
/* ----------- Google Pixel XL ----------- */ | |
/* Portrait and Landscape */ | |
@media screen | |
and (device-width: 360px) | |
and (device-height: 640px) | |
and (-webkit-device-pixel-ratio: 4) { | |
} | |
/* Portrait */ | |
@media screen | |
and (device-width: 360px) | |
and (device-height: 640px) | |
and (-webkit-device-pixel-ratio: 4) | |
and (orientation: portrait) { | |
} | |
/* Landscape */ | |
@media screen | |
and (device-width: 360px) | |
and (device-height: 640px) | |
and (-webkit-device-pixel-ratio: 4) | |
and (orientation: landscape) { | |
} | |
/* HTC Phones */ | |
/* ----------- HTC One ----------- */ | |
/* Portrait and Landscape */ | |
@media screen | |
and (device-width: 360px) | |
and (device-height: 640px) | |
and (-webkit-device-pixel-ratio: 3) { | |
} | |
/* Portrait */ | |
@media screen | |
and (device-width: 360px) | |
and (device-height: 640px) | |
and (-webkit-device-pixel-ratio: 3) | |
and (orientation: portrait) { | |
} | |
/* Landscape */ | |
@media screen | |
and (device-width: 360px) | |
and (device-height: 640px) | |
and (-webkit-device-pixel-ratio: 3) | |
and (orientation: landscape) { | |
} | |
/* Windows Phone */ | |
/* ----------- Windows Phone ----------- */ | |
/* Portrait and Landscape */ | |
@media screen | |
and (device-width: 480px) | |
and (device-height: 800px) { | |
} | |
/* Portrait */ | |
@media screen | |
and (device-width: 480px) | |
and (device-height: 800px) | |
and (orientation: portrait) { | |
} | |
/* Landscape */ | |
@media screen | |
and (device-width: 480px) | |
and (device-height: 800px) | |
and (orientation: landscape) { | |
} | |
/*! Tablets */ | |
/*! ======================================================================== */ | |
/* iPads */ | |
/* ----------- iPad 1, 2, Mini and Air ----------- */ | |
/* Portrait and Landscape */ | |
@media only screen | |
and (min-device-width: 768px) | |
and (max-device-width: 1024px) | |
and (-webkit-min-device-pixel-ratio: 1) { | |
} | |
/* Portrait */ | |
@media only screen | |
and (min-device-width: 768px) | |
and (max-device-width: 1024px) | |
and (orientation: portrait) | |
and (-webkit-min-device-pixel-ratio: 1) { | |
} | |
/* 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 3, 4 and Pro 9.7" ----------- */ | |
/* Portrait and Landscape */ | |
@media only screen | |
and (min-device-width: 768px) | |
and (max-device-width: 1024px) | |
and (-webkit-min-device-pixel-ratio: 2) { | |
} | |
/* Portrait */ | |
@media only screen | |
and (min-device-width: 768px) | |
and (max-device-width: 1024px) | |
and (orientation: portrait) | |
and (-webkit-min-device-pixel-ratio: 2) { | |
} | |
/* Landscape */ | |
@media only screen | |
and (min-device-width: 768px) | |
and (max-device-width: 1024px) | |
and (orientation: landscape) | |
and (-webkit-min-device-pixel-ratio: 2) { | |
} | |
/* ----------- iPad Pro 10.5" ----------- */ | |
/* Portrait and Landscape */ | |
@media only screen | |
and (min-device-width: 834px) | |
and (max-device-width: 1112px) | |
and (-webkit-min-device-pixel-ratio: 2) { | |
} | |
/* Portrait */ | |
/* Declare the same value for min- and max-width to avoid colliding with desktops */ | |
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/ | |
@media only screen | |
and (min-device-width: 834px) | |
and (max-device-width: 834px) | |
and (orientation: portrait) | |
and (-webkit-min-device-pixel-ratio: 2) { | |
} | |
/* Landscape */ | |
/* Declare the same value for min- and max-width to avoid colliding with desktops */ | |
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/ | |
@media only screen | |
and (min-device-width: 1112px) | |
and (max-device-width: 1112px) | |
and (orientation: landscape) | |
and (-webkit-min-device-pixel-ratio: 2) { | |
} | |
/* ----------- iPad Pro 12.9" ----------- */ | |
/* Portrait and Landscape */ | |
@media only screen | |
and (min-device-width: 1024px) | |
and (max-device-width: 1366px) | |
and (-webkit-min-device-pixel-ratio: 2) { | |
} | |
/* Portrait */ | |
/* Declare the same value for min- and max-width to avoid colliding with desktops */ | |
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/ | |
@media only screen | |
and (min-device-width: 1024px) | |
and (max-device-width: 1024px) | |
and (orientation: portrait) | |
and (-webkit-min-device-pixel-ratio: 2) { | |
} | |
/* Landscape */ | |
/* Declare the same value for min- and max-width to avoid colliding with desktops */ | |
/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/ | |
@media only screen | |
and (min-device-width: 1366px) | |
and (max-device-width: 1366px) | |
and (orientation: landscape) | |
and (-webkit-min-device-pixel-ratio: 2) { | |
} | |
/* Galaxy Tablets */ | |
/* ----------- Galaxy Tab 2 ----------- */ | |
/* Portrait and Landscape */ | |
@media | |
(min-device-width: 800px) | |
and (max-device-width: 1280px) { | |
} | |
/* Portrait */ | |
@media | |
(max-device-width: 800px) | |
and (orientation: portrait) { | |
} | |
/* Landscape */ | |
@media | |
(max-device-width: 1280px) | |
and (orientation: landscape) { | |
} | |
/* ----------- Galaxy Tab S ----------- */ | |
/* Portrait and Landscape */ | |
@media | |
(min-device-width: 800px) | |
and (max-device-width: 1280px) | |
and (-webkit-min-device-pixel-ratio: 2) { | |
} | |
/* Portrait */ | |
@media | |
(max-device-width: 800px) | |
and (orientation: portrait) | |
and (-webkit-min-device-pixel-ratio: 2) { | |
} | |
/* Landscape */ | |
@media | |
(max-device-width: 1280px) | |
and (orientation: landscape) | |
and (-webkit-min-device-pixel-ratio: 2) { | |
} | |
/* Nexus Tablets */ | |
/* ----------- 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) { | |
} | |
/* 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) { | |
} | |
/* 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) { | |
} | |
/* ----------- Nexus 9 ----------- */ | |
/* Portrait and Landscape */ | |
@media screen | |
and (device-width: 1536px) | |
and (device-height: 2048px) | |
and (-webkit-min-device-pixel-ratio: 1.331) | |
and (-webkit-max-device-pixel-ratio: 1.332) { | |
} | |
/* Portrait */ | |
@media screen | |
and (device-width: 1536px) | |
and (device-height: 2048px) | |
and (-webkit-min-device-pixel-ratio: 1.331) | |
and (-webkit-max-device-pixel-ratio: 1.332) | |
and (orientation: portrait) { | |
} | |
/* Landscape */ | |
@media screen | |
and (device-width: 1536px) | |
and (device-height: 2048px) | |
and (-webkit-min-device-pixel-ratio: 1.331) | |
and (-webkit-max-device-pixel-ratio: 1.332) | |
and (orientation: landscape) { | |
} | |
/* Kindle Fire */ | |
/* ----------- 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) { | |
} | |
/* 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) { | |
} | |
/* 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) { | |
} | |
/* 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) { | |
} | |
/* 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 */ | |
/* Media Queries for laptops are a bit of a juggernaut. Instead of targeting specific devices, | |
try specifying a general screen size range, then distinguishing between retina and non-retina screens. */ | |
/*! ======================================================================== */ | |
/* ----------- Non-Retina Screens ----------- */ | |
@media screen | |
and (min-device-width: 1200px) | |
and (max-device-width: 1600px) | |
and (-webkit-min-device-pixel-ratio: 1) { | |
} | |
/* ----------- 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) { | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment