Retina Media Queries for Sass

mq.scss

// Based on Chris' post here: https://gist.github.com/3828790

@mixin respond-to($size) {
    
    // Small

    @if $size == "small" {
        @media only screen and (min-width: 320px) {
            @content;
        }
    }

    // Small (Retina)

    @else if $size == "small-retina" {
        @media
        only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
        only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
        only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
        only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
        only screen and (                min-resolution: 192dpi) and (min-width: 320px),
        only screen and (                min-resolution: 2dppx)  and (min-width: 320px) {
            @content;
        } 
    }

    // Medium

    @else if $size == "medium" {
        @media only screen and (min-width: 700px) {
            @content;
        }
    }

    // Medium (Retina)

    @else if $size == "medium-retina" {
        @media
        only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
        only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
        only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
        only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
        only screen and (                min-resolution: 192dpi) and (min-width: 700px),
        only screen and (                min-resolution: 2dppx)  and (min-width: 700px) {
            @content;
        } 
    }

    // Large

    @else if $size == "large" {
        @media only screen and (min-width: 1300px) {
            @content;
        }
    }

    // Large (Retina)

    @else if $size == "large-retina" {
        @media
        only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
        only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
        only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
        only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
        only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
        only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) {
            @content;
        }
    }

}