Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
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; }
}
@kuzin
Owner

Adding settings.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.