Skip to content

Instantly share code, notes, and snippets.

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

Embed
What would you like to do?
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.

Copy link
Owner Author

commented Oct 3, 2012

Adding settings.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.