Last active
February 13, 2025 18:43
-
Star
(114)
You must be signed in to star a gist -
Fork
(44)
You must be signed in to fork a gist
-
-
Save chrisl8888/5832418 to your computer and use it in GitHub Desktop.
All Media Queries breakpoints
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
| @media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ } | |
| @media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ } | |
| @media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ } | |
| @media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ } | |
| @media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ } | |
| @media (min-width:1281px) { /* hi-res laptops and desktops */ } |
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
| $mobile-screen: 690px; | |
| $tablet-screen: 995px; | |
| $desktop-screen: 1440px; | |
| $screen: "only screen"; | |
| $mobile: "only screen and (max-width:#{$mobile-screen})"; | |
| $tablet: "only screen and (min-width:#{$mobile-screen}) and (max-width: #{$tablet-screen})"; | |
| $desktop: "only screen and (min-width:#{$tablet-screen})"; | |
| $landscape: "only screen and (orientation: landscape)"; | |
| $portrait: "only screen and (orientation: portrait)"; |
Nice
How can I use these?
Thank you in advance.
Thanks
Very helpful, thank you.
thx
Greetings. Thank you for this. I was hoping that when you get some time, if you could explain the min-width choices you've made a little more in depth that would be fantastic. I'm new to media queries and I'm seriously enjoying it. Thanks again for this gem!
this is really the gem :D thank you
to use this, media query must be written
@media #{$mobile} { .yourClass { //css attributes } }
since $mobile variable holds the text "only screen and (min-width:#{$mobile-screen}) and (max-width: #{$tablet-screen})" and so on.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
thank you