All Media Queries breakpoints

media-queries.scss

@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 */ }

media-queries2.scss

$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)";

thank you

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.