Skip to content

Instantly share code, notes, and snippets.

@stammy

stammy/_media-queries.scss

Forked from anthonyshort/_media-queries.scss
Last active December 20, 2019 11:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save stammy/4442615 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save stammy/4442615 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. stammy revised this gist Jan 3, 2013. 1 changed file with 33 additions and 28 deletions.
    61 changes: 33 additions & 28 deletions _media-queries.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,20 +1,14 @@
    // Media Queries in Sass 3.2
    //
    // These mixins make media queries a breeze with Sass.
    // The media queries from mobile up until desktop all
    // trigger at different points along the way
    //
    // And important point to remember is that and width
    // over the portrait width is considered to be part of the
    // landscape width. This allows us to capture widths of devices
    // that might not fit the dimensions exactly. This means the break
    // points are seamless.

    $mq-mobile-portrait : 320px !default;
    $mq-mobile-landscape : 480px !default;
    $mq-tablet-portrait : 768px !default;
    $mq-tablet-landscape : 1024px !default;
    $mq-desktop : 1382px !default;
    // $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 {
    @@ -47,7 +41,7 @@ $mq-desktop : 1382px !default;

    // Everthing larger than a portrait mobile up until mobile landscape
    @mixin mobile-landscape-only {
    @media only screen and (min-width : $mq-mobile-portrait + 1) and (max-width : $mq-mobile-landscape) {
    @media only screen and (min-width : $mq-mobile-portrait + .001) and (max-width : $mq-mobile-landscape) {
    @content;
    }
    }
    @@ -61,22 +55,22 @@ $mq-desktop : 1382px !default;

    // Everything above and including the mobile landscape width
    @mixin mobile-landscape-and-up {
    @media only screen and (min-width : $mq-mobile-portrait + 1) {
    @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 + 1) and (max-width : $mq-tablet-landscape) {
    @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 + 1) and (max-width : $mq-tablet-portrait) {
    @media only screen and (min-width : $mq-mobile-landscape + .001) and (max-width : $mq-tablet-portrait) {
    @content;
    }
    }
    @@ -90,14 +84,15 @@ $mq-desktop : 1382px !default;

    // 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-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 + 1) and (max-width : $mq-tablet-landscape) {
    @media only screen and (min-width : $mq-tablet-portrait + .001) and (max-width : $mq-tablet-landscape) {
    @content;
    }
    }
    @@ -111,14 +106,14 @@ $mq-desktop : 1382px !default;

    // Everything larger than portrait tablet
    @mixin tablet-landscape-and-up {
    @media only screen and (min-width : $mq-tablet-portrait + 1) {
    @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 + 1) {
    @media only screen and (min-width : $mq-tablet-landscape + .001) {
    @content;
    }
    }
    @@ -132,14 +127,24 @@ $mq-desktop : 1382px !default;

    // 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 + 1) and (max-width : $mq-desktop) {
    @media only screen and (min-width : $mq-tablet-landscape + .001) and (max-width : $mq-desktop) {
    @content;
    }
    }

    // Retina screens have a 1.5 pixel ratio, not 2
    @mixin retina {
    @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
    @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;
    }
    }
    }
  2. @anthonyshort anthonyshort revised this gist Mar 14, 2012. 1 changed file with 65 additions and 33 deletions.
    98 changes: 65 additions & 33 deletions _media-queries.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,111 +1,143 @@
    // Dimensions of devices
    // iPad Retina - 1536x2048
    // iPad - 768x1024
    // iPhone - 320x480
    // iPhone Retina - 640x960

    // Media Queries in Sass 3.2
    //
    // These mixins make media queries a breeze with Sass.
    // The media queries from mobile up until desktop all
    // trigger at different points along the way
    //
    // And important point to remember is that and width
    // over the portrait width is considered to be part of the
    // landscape width. This allows us to capture widths of devices
    // that might not fit the dimensions exactly. This means the break
    // points are seamless.

    $mq-mobile-portrait : 320px !default;
    $mq-mobile-landscape : 480px !default;
    $mq-tablet-portrait : 768px !default;
    $mq-tablet-landscape : 1024px !default;
    $mq-desktop : 1382px !default;

    // Both portrait and landscape
    @mixin mobile-only {
    @media only screen and (max-width : 480px) {
    @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 only screen and (max-width : 320px) {
    @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 : 321px) and (max-width : 480px) {
    @media only screen and (min-width : $mq-mobile-portrait + 1) 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 : 480px) {
    @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 : 321px) {
    @media only screen and (min-width : $mq-mobile-portrait + 1) {
    @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 : 481px) and (max-width : 1024px) {
    @media only screen and (min-width : $mq-mobile-landscape + 1) 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 : 481px) and (max-width : 768px) {
    @media only screen and (min-width : $mq-mobile-landscape + 1) 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 : 768px) {
    @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 : 481px) {
    @media only screen and (min-width : $mq-mobile-landscape + 1) {
    @content;
    }
    }

    // Larger than portrait but less than or equal to the landscape width
    @mixin tablet-landscape-only {
    @media only screen and (min-width : 769px) and (max-width : 1024px) {
    @media only screen and (min-width : $mq-tablet-portrait + 1) 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 : 1024px) {
    @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 : 769px) {
    @media only screen and (min-width : $mq-tablet-portrait + 1) {
    @content;
    }
    }

    // Everything larger than a landscape tablet
    @mixin desktop-and-up {
    @media only screen and (min-width : 1025px) {
    @media only screen and (min-width : $mq-tablet-landscape + 1) {
    @content;
    }
    }

    // Everything below and including the desktop
    @mixin desktop-and-below {
    @media only screen and (max-width : 1823px) {
    @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 : 1025px) and (max-width : 1823px) {
    @content;
    }
    }

    @mixin desktop-and-below {
    @media only screen and (min-width : 1025px) and (max-width : 1823px) {
    @content;
    }
    }

    @mixin wide-screen-only {
    @media only screen and (min-width : 1824px) {
    @media only screen and (min-width : $mq-tablet-landscape + 1) and (max-width : $mq-desktop) {
    @content;
    }
    }

    // Retina screens have a 1.5 pixel ratio, not 2
    @mixin retina {
    @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
    @content;
  3. @anthonyshort anthonyshort revised this gist Mar 13, 2012. No changes.
  4. @anthonyshort anthonyshort created this gist Mar 13, 2012.
    113 changes: 113 additions & 0 deletions _media-queries.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,113 @@
    // Dimensions of devices
    // iPad Retina - 1536x2048
    // iPad - 768x1024
    // iPhone - 320x480
    // iPhone Retina - 640x960

    @mixin mobile-only {
    @media only screen and (max-width : 480px) {
    @content;
    }
    }

    @mixin mobile-portrait-only {
    @media only screen and (max-width : 320px) {
    @content;
    }
    }

    @mixin mobile-landscape-only {
    @media only screen and (min-width : 321px) and (max-width : 480px) {
    @content;
    }
    }

    @mixin mobile-landscape-and-below {
    @media only screen and (max-width : 480px) {
    @content;
    }
    }

    @mixin mobile-landscape-and-up {
    @media only screen and (min-width : 321px) {
    @content;
    }
    }

    @mixin tablet-only {
    @media only screen and (min-width : 481px) and (max-width : 1024px) {
    @content;
    }
    }

    @mixin tablet-portrait-only {
    @media only screen and (min-width : 481px) and (max-width : 768px) {
    @content;
    }
    }

    @mixin tablet-portrait-and-below {
    @media only screen and (max-width : 768px) {
    @content;
    }
    }

    @mixin tablet-portrait-and-up {
    @media only screen and (min-width : 481px) {
    @content;
    }
    }

    @mixin tablet-landscape-only {
    @media only screen and (min-width : 769px) and (max-width : 1024px) {
    @content;
    }
    }

    @mixin tablet-landscape-and-below {
    @media only screen and (max-width : 1024px) {
    @content;
    }
    }

    @mixin tablet-landscape-and-up {
    @media only screen and (min-width : 769px) {
    @content;
    }
    }

    @mixin desktop-and-up {
    @media only screen and (min-width : 1025px) {
    @content;
    }
    }

    @mixin desktop-and-below {
    @media only screen and (max-width : 1823px) {
    @content;
    }
    }

    @mixin desktop-only {
    @media only screen and (min-width : 1025px) and (max-width : 1823px) {
    @content;
    }
    }

    @mixin desktop-and-below {
    @media only screen and (min-width : 1025px) and (max-width : 1823px) {
    @content;
    }
    }

    @mixin wide-screen-only {
    @media only screen and (min-width : 1824px) {
    @content;
    }
    }

    @mixin retina {
    @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
    @content;
    }
    }