Skip to content

Instantly share code, notes, and snippets.

@stammy
Forked from anthonyshort/_media-queries.scss
Last active December 20, 2019 11:57
Show Gist options
  • Save stammy/4442615 to your computer and use it in GitHub Desktop.
Save stammy/4442615 to your computer and use it in GitHub Desktop.
because you should be using ems for accessibility (zoom level) in your media queries
// $mq-mobile-portrait : 320px !default;
// $mq-mobile-landscape : 480px !default;
// $mq-tablet-portrait : 640px !default; -- changed because i want my blog content is around this wide, not 768. you should let content & design determine your breakpoints
// $mq-tablet-landscape : 1024px !default;
// $mq-desktop : 1382px !default;
$mq-mobile-portrait : 20em !default;
$mq-mobile-landscape : 30em !default;
$mq-tablet-portrait : 40em !default;
$mq-tablet-landscape : 64em !default;
$mq-desktop : 86.375em !default;
// Both portrait and landscape
@mixin mobile-only {
@media (max-width : $mq-mobile-landscape) {
@content;
}
}
// Everything up to and including the portrait width of the phone
// Since it's the smallest query it doesn't need a min
@mixin mobile-portrait-only {
@media (max-width : $mq-mobile-portrait) {
@content;
}
}
// Everything up to and including the mobile portrait
@mixin mobile-portrait-and-below {
@media (max-width : $mq-mobile-portrait) {
@content;
}
}
// Everything above and including the mobile portrait
@mixin mobile-portrait-and-up {
@media (min-width : $mq-mobile-portrait) {
@content;
}
}
// Everthing larger than a portrait mobile up until mobile landscape
@mixin mobile-landscape-only {
@media only screen and (min-width : $mq-mobile-portrait + .001) and (max-width : $mq-mobile-landscape) {
@content;
}
}
// Everything up to and including the mobile landscape width
@mixin mobile-landscape-and-below {
@media only screen and (max-width : $mq-mobile-landscape) {
@content;
}
}
// Everything above and including the mobile landscape width
@mixin mobile-landscape-and-up {
@media only screen and (min-width : $mq-mobile-portrait + .001) {
@content;
}
}
// Both the portrait and landscape width of the tablet
// Larger than a landscape mobile but less than or equal to a landscape tablet
@mixin tablet-only {
@media only screen and (min-width : $mq-mobile-landscape + .001) and (max-width : $mq-tablet-landscape) {
@content;
}
}
// Everything larger than mobile landscape up until the portrait width of the tablet
@mixin tablet-portrait-only {
@media only screen and (min-width : $mq-mobile-landscape + .001) and (max-width : $mq-tablet-portrait) {
@content;
}
}
// Everything below and including the portrait width of the tablet
@mixin tablet-portrait-and-below {
@media only screen and (max-width : $mq-tablet-portrait) {
@content;
}
}
// Everything above and including the portrait width of the tablet
@mixin tablet-portrait-and-up {
// @media only screen and (min-width : $mq-mobile-landscape + 1) {
@media only screen and (min-width : $mq-tablet-portrait + .001) {
@content;
}
}
// Larger than portrait but less than or equal to the landscape width
@mixin tablet-landscape-only {
@media only screen and (min-width : $mq-tablet-portrait + .001) and (max-width : $mq-tablet-landscape) {
@content;
}
}
// Up to and including the tablet landscape
@mixin tablet-landscape-and-below {
@media only screen and (max-width : $mq-tablet-landscape) {
@content;
}
}
// Everything larger than portrait tablet
@mixin tablet-landscape-and-up {
@media only screen and (min-width : $mq-tablet-portrait + .001) {
@content;
}
}
// Everything larger than a landscape tablet
@mixin desktop-and-up {
@media only screen and (min-width : $mq-tablet-landscape + .001) {
@content;
}
}
// Everything below and including the desktop
@mixin desktop-and-below {
@media only screen and (max-width : $mq-desktop) {
@content;
}
}
// Everything larger than a landscape tablet but less than or equal to the desktop
@mixin desktop-only {
@media only screen and (min-width : $mq-tablet-landscape + .001) and (max-width : $mq-desktop) {
@content;
}
}
@mixin retina {
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) {
@content;
}
}
@mixin image-2x($image, $width: auto, $height: $width) {
@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 13/10),
only screen and (min-resolution: 120dpi) {
background-image: url($image);
@if $width != auto {
background-size: $width $height;
}
}
}
@nikravi
Copy link

nikravi commented Mar 23, 2013

Hi Paul.. I was using your gist, and I saw a small issue. The tablet-portrait-and-up is the same as tablet-landscape-and-up

@mixin tablet-portrait-and-up {
 // @media only screen and (min-width : $mq-mobile-landscape + 1) {
 @media only screen and (min-width : $mq-tablet-portrait + .001) {
    @content;
 }
}

and landscape and up

@mixin tablet-landscape-and-up {
 @media only screen and (min-width : $mq-tablet-portrait + .001) {
    @content;
 }
}

Thank you for sharing this

@thatryan
Copy link

How do you get the em value versions of the pixels? For example, if I needed a breakpoint at the em equivalent of about 800px, how would I find that?

Thanks :)

@palcisto
Copy link

palcisto commented Oct 8, 2013

@thatryan if you using a base font-size of 100%, the default font size would be 16px. You would divide the 800px breakpoint by the base font-size of 16px, to get your 'em' value of 800px.

ex. 800px / 16px = 50em

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment