public

kuzin / mq.css

Last active 2013-06-11 — forked from chriscoyier/mq.css

@mixin respond-to($media, $retina: true) {
 
    // Settings
    $small  : 320px;
    $medium : 700px;
    $large  : 1300px;
 
    @if $media == 'small' {
        @if $retina == true {
            @media
            only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: #{$small}),
            only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: #{$small}),
            only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: #{$small}),
            only screen and (        min-device-pixel-ratio: 2)      and (min-width: #{$small}),
            only screen and (                min-resolution: 192dpi) and (min-width: #{$small}),
            only screen and (                min-resolution: 2dppx)  and (min-width: #{$small}) { @content }
        } @else {
            @media only screen and (min-width: #{$small}) { @content }
        }
    } @else if $media == 'medium' {
        @if $retina == true {
            @media
            only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: #{$medium}),
            only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: #{$medium}),
            only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: #{$medium}),
            only screen and (        min-device-pixel-ratio: 2)      and (min-width: #{$medium}),
            only screen and (                min-resolution: 192dpi) and (min-width: #{$medium}),
            only screen and (                min-resolution: 2dppx)  and (min-width: #{$medium}) { @content }
        } @else {
            @media only screen and (min-width: #{$medium}) { @content }
        }
    } @else if $media == 'large' {
        @if $retina == true {
            @media
            only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: #{$large}),
            only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: #{$large}),
            only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: #{$large}),
            only screen and (        min-device-pixel-ratio: 2)      and (min-width: #{$large}),
            only screen and (                min-resolution: 192dpi) and (min-width: #{$large}),
            only screen and (                min-resolution: 2dppx)  and (min-width: #{$large}) { @content }
        } @else {
            @media only screen and (min-width: #{$large}) { @content }
        }
    }
}
 
// Example
@include respond-to(small, true) {
    body { background: orange; }
}