Skip to content

Instantly share code, notes, and snippets.

@ddemaree
Created April 26, 2013 20:49
Show Gist options
  • Star 23 You must be signed in to star a gist
  • Fork 9 You must be signed in to fork a gist
  • Save ddemaree/5470343 to your computer and use it in GitHub Desktop.
Save ddemaree/5470343 to your computer and use it in GitHub Desktop.
Example Sass mixin for a "bulletproof" Hi-DPI media query
@mixin retina($ratio: 1.5) {
$dpi: $ratio * 96;
$opera-ratio: $ratio * 100;
@media only screen and (-webkit-min-device-pixel-ratio: #{$ratio}),
only screen and ( -o-min-device-pixel-ratio: '#{$opera-ratio}/100'),
only screen and ( min-resolution: #{$dpi}dpi),
only screen and ( min-resolution: #{$ratio}dppx) {
@content;
}
}
@import "retina";
.body-text {
font-weight: normal;
@include retina {
font-weight: 300;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment