Skip to content

Instantly share code, notes, and snippets.

@tomkrush
Last active January 4, 2016 06:08

Revisions

  1. tomkrush renamed this gist Jan 23, 2014. 1 changed file with 0 additions and 0 deletions.
    File renamed without changes.
  2. tomkrush created this gist Jan 23, 2014.
    60 changes: 60 additions & 0 deletions gistfile1.txt
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,60 @@
    $rwd-desktop: "only screen and (min-width: 1024px)";

    $rwd-tablet-device: "only screen and (max-device-width: 980px)";
    $rwd-mobile-device: "only screen and (max-device-width: 600px)";

    $rwd-tablet: "only screen and (max-width: 980px)";
    $rwd-tablet-only: "only screen and (min-width: 740px) and (max-width: 980px)";

    $rwd-small-tablet: "only screen and (max-width: 740px)";
    $rwd-small-tablet-only: "only screen and (min-width: 600px) and (max-width: 740px)";

    $rwd-wide-mobile: "only screen and (max-width: 600px)";
    $rwd-wide-mobile-only: "only screen and (min-width: 480px) and (max-width: 600px)";

    $rwd-mobile: "only screen and (max-width: 479px)";

    $nexus7: "only screen and (min-width:601px) and (device-width:601px) and (max-width:601px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio:1.3312500715255737) and (device-aspect-ratio:601/906)";
    $nexus7_hdpi: "only screen and (min-width: 600px) and (device-width: 600px) and (max-width: 600px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) and (device-aspect-ratio: 25/38)";

    @mixin use-query($query) {
    @media #{$query} {
    @content;
    }
    }

    @mixin responds-to($sizes, $and_below: false) {
    $query: "only screen";

    @if $sizes == "tablet" {
    @if $and_below {
    $query: $rwd-tablet;
    } @else {
    $query: $rwd-tablet-only;
    }
    }

    @if $sizes == "small-tablet" {
    @if $and_below {
    $query: $rwd-small-tablet;
    } @else {
    $query: $rwd-small-tablet-only;
    }
    }

    @if $sizes == "wide-mobile" {
    @if $and_below {
    $query: $rwd-wide-mobile;
    } @else {
    $query: $rwd-wide-mobile-only;
    }
    }

    @if $sizes == "mobile" {
    $query: $rwd-mobile;
    }

    @include use-query($query) {
    @content;
    }
    }