Create a gist now

Instantly share code, notes, and snippets.

@kuzin /mq.css forked from chriscoyier/mq.css
Created Oct 3, 2012

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