media query

media-query-template

$tablet-width: 768px;
$phone-width: 320px;
$desktop-width: 1024px;
$widescreen-width: 1400px;
 
 
@mixin tablet {
  @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
    @content;
  }
}
@mixin mobile {
  @media (min-width: #{$phone-width}) and (max-width: #{$desktop-width - 1px}) {
    @content;
  }
}
@mixin phone {
  @media (min-width: #{$phone-width}) and (max-width: #{$tablet-width - 1px}) {
    @content;
  }
}
@mixin desktop {
  @media (min-width: #{$desktop-width}) {
    @content;
  }
}
@mixin ultra {
  @media (min-width: #{$widescreen-width - 1px}) {
    @content;
  }
}