Last active
January 9, 2024 23:36
-
-
Save aamorozov/ff6b41896b7cfef299ec9ce83ea1889d to your computer and use it in GitHub Desktop.
Media Queries for mobile/tablet devices(WIP)
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
/*Reference: | |
http://www.canbike.org/CSSpixels/ | |
https://css-tricks.com/snippets/css/retina-display-media-query/ | |
http://stephen.io/mediaqueries/ | |
Requires the meta viewport tag with content 'width=device-width' | |
For all devices with "unusual" pixel ratio i.e retina and etc include the following depending on device: | |
(-webkit-min-device-pixel-ratio: 1) | |
(-webkit-min-device-pixel-ratio: 2) | |
(-webkit-min-device-pixel-ratio: 3) | |
*/ | |
@media only screen | |
and (min-device-width : 1024px) | |
and (max-device-width : 1366px) | |
and (orientation : portrait) | |
and (-webkit-min-device-pixel-ratio: 2) { | |
/* PORTRAIT: | |
Apple Ipad Pro */ } | |
@media only screen and (max-width: 800px) and (orientation : portrait) { | |
/* PORTRAIT: | |
Samsung Galaxy Tab 3(10") | |
Amazon indle Fire HD | |
Motorola Xoom 1, 2 */ | |
} | |
@media only screen and (max-width: 768px) and (orientation : portrait) { | |
/* PORTRAIT: | |
Apple iPad 1,2,3,4,Air, Mini | |
Microsoft Surface | |
HP Touchpad | |
LG Optimus Pad */ | |
} | |
@media only screen and (max-width: 720px) and (orientation : portrait) { | |
/* PORTRAIT: | |
Microsof Surface Pro */ | |
} | |
@media only screen and (max-width: 600px) and (orientation : portrait) { | |
/* PORTRAIT: | |
Asus Nexus 7 | |
BlackBerry PlayBook | |
Kindle 3 | |
LG G Pad 8.3 | |
Samsung Galaxy Tab 2(7") */ | |
} | |
/*Mobile. Iphone 6 plus and galaxy edge will go somewhere here*/ | |
@media only screen and (max-width: 400px) and (orientation : portrait) { | |
/* PORTRAIT: (some of them might need to be broken out into '360px') | |
Apple Iphone 6 | |
Samsung Galaxy S3, S4, S5, S6, S7 | |
Samsung Galaxy Note, Note 2 | |
Motorola Moto G | |
LG Nexus 5 | |
Google Nexus 5 | |
HTC One X, Sensation | |
BlackBerry Bold 9900 | |
BlackBerry Z10 */ | |
} | |
@media only screen and (max-width: 320px) and (orientation : portrait) { | |
/* PORTRAIT: | |
Apple iPhone 3, 4, 5 | |
HTC Nexus One, Evo | |
LG Optimus | |
Nokia N900 | |
Nokia Lumia 1020 | |
Samsung Galaxy S, S2 */ | |
} | |
@media only screen and (max-width: 1366px) and (orientation : landscape) { | |
/* LANDSCAPE: | |
Microsoft Surface | |
Apple Ipad Pro */ | |
} | |
@media only screen and (max-width: 1280px) and (orientation : landscape) { | |
/* LANDSCAPE: | |
Samsung Galaxy Tab(7.7 > 12.2) | |
Mictosoft Surface Pro 1, 2 | |
Acer Iconia Tab (A100-A500) | |
ASUS Transformer Pad TF300T | |
Motorola Xoom 1, 2 | |
LG Optimus Pad */ | |
} | |
@media only screen and (max-width: 1024px) and (orientation : landscape) { | |
/* LANDSCAPE: | |
Apple iPad 1,2,3,4,Air,Mini | |
BlackBerry PlayBook | |
Samsung Galaxy Tab 2(7") */ | |
} | |
@media only screen and (max-width: 980px) and (orientation : landscape) { | |
/* LANDSCAPE: | |
Nexus 7 | |
HTC Evo 3D */ | |
} | |
@media only screen and (max-width: 800px) and (orientation : landscape) { | |
/* LANDSCAPE: | |
Iphone 6plus | |
Kindle Fire HD 7, 8 | |
HTC Desire Z | |
Nokia N900 | |
Samsung Galaxy Grand */ | |
} | |
@media only screen and (max-width: 640px) and (orientation : landscape) { | |
/* LANDSCAPE: | |
Samsung Galaxy S3, S4, S5, S6, S7 | |
Samsung Galaxy Note 1, 2 | |
HTC One S, V | |
Nokia 500 */ | |
} | |
@media only screen and (max-width: 600px) and (orientation : landscape) { | |
/* LANDSCAPE: | |
Nexus 4 | |
Apple iPhone 5 */ | |
} | |
@media only screen and (max-width: 540px) and (orientation : landscape) { | |
/* LANDSCAPE: | |
HTC Desire, One | |
LG Optimus 2X | |
Nexus S | |
Samsung Galaxy S2 | |
BlackBerry Z10 */ | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment