kuzin / mq.css

Created October 03, 2012 — forked from chriscoyier/mq.css


    
    View mq.css 
  
  
      mq.css
    
    
        Raw
      
    
    File suppressed. Click to show.
  
  
            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
          
          
            @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; }
}