Create a gist now

Instantly share code, notes, and snippets.

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

Embed
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

This comment has been minimized.

Show comment
Hide comment
@kuzin

kuzin Oct 3, 2012

Adding settings.

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