media_query_mixin.scss

// Base on awesome work from:
//   Mason Wendell http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32
//   Jason Cypret http://jasoncypret.com/responsive-sass-mixin/
@mixin respond-to($media) {
    @if $media == smartphone {
        @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { @content }
    } @else if $media == smartphone-l {
        @media only screen and (min-width : 321px) { @content }
    } @else if $media == smartphone-p {
        @media only screen and (max-width : 320px) { @content }
    } @else if $media == ipad {
        @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { @content }
    } @else if $media == ipad-l {
        @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { @content }
    } @else if $media == ipad-p {
        @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { @content }
    } @else if $media == desktop {
        @media only screen and (min-width : 1224px) { @content }
    } @else if $media == cinema {
        @media only screen and (min-width : 1824px) { @content }
    } @else if $media == retina {
        @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { @content }
    }
}