mediaqueries-mixins.scss

/* Smartphones (portrait and landscape) ----------- */
@mixin Smartphones {
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    /* Styles */
        @content;
    }
}

/* Smartphones (landscape) ----------- */
@mixin Smartphones-Landscape {
    @media only screen and (min-width : 321px) {
    /* Styles */
        @content;
    }
}


/* Desktops and laptops ----------- */
@mixin Desktops-lap {
    @media only screen  and (min-width : 1224px) {
    /* Styles */
        @content;
    }
}


/* Large screens ----------- */
@mixin Desktops-lap {
    @media only screen  and (min-width : 1824px) {
    /* Styles */
        @content;
    }
}

// iPad in portrait & landscape

@mixin iPad {
    @media only screen
    and (min-device-width : 768px) and (max-device-width : 1024px)  {
        /* Syles */
        @content;
    }
}

// iPad 3 & 4 Media Queries

@mixin iPad3-4 {

    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) {
        /* Styles */
        @content;
    }

}

// iPad 1 & 2 Media Queries

@mixin iPad1-2 {
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px)
    and (-webkit-min-device-pixel-ratio: 1){
        /* Styles */
        @content;
    }
}


// iPhone 6 Media Queries

@mixin iPhone6 {
    @media only screen
    and (min-device-width : 375px)
    and (max-device-width : 667px) {
        /* Style */
        @content;
    }
}



// iPhone 5 & 5S Media Queries

@mixin iPhone5 {
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 568px) {
        @content;
    }
}

// Older Phones

@mixin olderiPhones {
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
        /* Style */
        @content;
    }
}