A few mixins to handle media queries.

_media-queries.scss

@mixin breakpoint-max($point) {
  @if $point == phone-s {
    @media (max-width: 320px) { @content; }
  }
  @else if $point == phone {
    @media (max-width: 480px) { @content; }
  }
  @else if $point == tablet-s {
    @media (max-width: 650px)  { @content; }
  }
  @else if $point == tablet {
    @media (max-width: 768px)  { @content; }
  }
  @else if $point == desktop-s {
    @media (max-width: 900px)  { @content; }
  }
  @else if $point == desktop-m {
    @media (max-width: 1200px)  { @content; }
  }
  @else if $point == desktop-l {
    @media (max-width: 1400px)  { @content; }
  }
  @else if $point == desktop-xl {
    @media (max-width: 1600px)  { @content; }
  }
  @else if $point == desktop-hd {
    @media (max-width: 1920px)  { @content; }
  }
   @else if $point == ipad34 {
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2)   { @content; }
  }
}

@mixin breakpoint-min($point) {
  @if $point == phone-s {
    @media (min-width: 320px) { @content; }
  }
  @else if $point == phone {
    @media (min-width: 480px) { @content; }
  }
  @else if $point == tablet-s {
    @media (min-width: 650px)  { @content; }
  }
  @else if $point == tablet {
    @media (min-width: 768px)  { @content; }
  }
  @else if $point == desktop-s {
    @media (min-width: 900px)  { @content; }
  }
  @else if $point == desktop-m {
    @media (min-width: 1200px)  { @content; }
  }
  @else if $point == desktop-l {
    @media (min-width: 1400px)  { @content; }
  }
  @else if $point == desktop-xl {
    @media (min-width: 1600px)  { @content; }
  }
  @else if $point == desktop-hd {
    @media (min-width: 1920px)  { @content; }
  }
}

@mixin device($device) {
    @if $device == ipad34 {
        @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2)   { @content; }
    }
    @else if $device == ipad12 {
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1)   { @content; }
  }
}