Media Queries Mixins for iPhone and iPad

Create a file names _responsive_mixins.scss

$iPhone5: 320px;
$iPhone6AndX: 375px;
$iPhonePlus: 414px;
$iPad: 768px;

@mixin iPhone5 {
   @media (max-width: #{$iPhone5}) {
       @content;
   }
}
@mixin iPhone6AndX {
    @media (min-width: #{$iPhone5 +1}) and (max-width: #{$iPhone6AndX}) {
        @content;
    }
}
@mixin iPhone6Plus {
    @media (min-width: #{$iPhone6AndX +1}) and (max-width: #{$iPhonePlus}) {
        @content;
    }
}
@mixin iPad {
    @media (min-width: #{$iPhonePlus +1}) and (max-width: #{$iPad}) {
        @content;
    }
}

Usage

@import "_reponsive_mixins"

.selector {
    display: inline-block;
    @include iPhone5 {
        display: none;
    }

    @include iPhone6AndX {
        display: none;
    }

    @include iPhone6Plus {
        display: none;        
    }

    @include iPad {
        display: none;    
    }    
}

🖖 Happy hacking.