@mixin media($screen) {
$mobile: 420px;
$tablet: 768px;
$desktop: 1245px;
$large:1440px;
@if $screen == mobile-only {
@media screen and (max-width: #{$tablet - 0.02}) {
@content;
}
} @else if $screen == mobile-only-landscape {
@media screen and (max-width: #{$tablet - 0.02}) and (orientation: landscape) {
@content;
}
} @else if $screen == mobile-small {
@media screen and (max-width: #{$mobile - 0.02}) {
@content;
}
} @else if $screen == mobile {
@media screen and (min-width: $mobile) {
@content;
}
} @else if $screen == tablet-only {
@media screen and (min-width: $tablet) and (max-width: #{$desktop - 0.02}) {
@content;
}
} @else if $screen == tablet {
@media screen and (min-width: $tablet) {
@content;
}
} @else if $screen == desktop {
@media screen and (min-width: $desktop) {
@content;
}
} @else if $screen == large {
@media screen and (min-width: $large) {
@content;
}
}@else if $screen == notDesktop {
@media screen and (max-width: #{$desktop - 0.02}) {
@content;
}
} @else if $screen == notLarge {
@media screen and (max-width: #{$large - 0.02}) {
@content;
}
}@else if $screen == retina {
@media only screen and (min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
@content;
}
}
}