Skip to content
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
kuzin commented Oct 3, 2012

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.