public
Last active — forked from anthonyshort/_media-queries.scss

because you should be using ems for accessibility (zoom level) in your media queries

  • Download Gist
_media-queries.scss
SCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150
// $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;
}
}
}

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

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 :)

@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

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.