SCSS Media Queries with Retina Support
@mixin respond-to($media, $retina: true) { | |
// Settings | |
$small : 320px; | |
$medium : 700px; | |
$large : 1300px; | |
@if $media == 'small' { | |
@if $retina == true { | |
@media | |
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: #{$small}), | |
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: #{$small}), | |
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: #{$small}), | |
only screen and ( min-device-pixel-ratio: 2) and (min-width: #{$small}), | |
only screen and ( min-resolution: 192dpi) and (min-width: #{$small}), | |
only screen and ( min-resolution: 2dppx) and (min-width: #{$small}) { @content } | |
} @else { | |
@media only screen and (min-width: #{$small}) { @content } | |
} | |
} @else if $media == 'medium' { | |
@if $retina == true { | |
@media | |
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: #{$medium}), | |
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: #{$medium}), | |
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: #{$medium}), | |
only screen and ( min-device-pixel-ratio: 2) and (min-width: #{$medium}), | |
only screen and ( min-resolution: 192dpi) and (min-width: #{$medium}), | |
only screen and ( min-resolution: 2dppx) and (min-width: #{$medium}) { @content } | |
} @else { | |
@media only screen and (min-width: #{$medium}) { @content } | |
} | |
} @else if $media == 'large' { | |
@if $retina == true { | |
@media | |
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: #{$large}), | |
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: #{$large}), | |
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: #{$large}), | |
only screen and ( min-device-pixel-ratio: 2) and (min-width: #{$large}), | |
only screen and ( min-resolution: 192dpi) and (min-width: #{$large}), | |
only screen and ( min-resolution: 2dppx) and (min-width: #{$large}) { @content } | |
} @else { | |
@media only screen and (min-width: #{$large}) { @content } | |
} | |
} | |
} | |
// Example | |
@include respond-to(small, true) { | |
body { background: orange; } | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Adding settings.