public
Created

Example Sass mixin for a "bulletproof" Hi-DPI media query

  • Download Gist
_retina.scss
SCSS
1 2 3 4 5 6 7 8 9 10 11
@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;
}
}
example.scss
SCSS
1 2 3 4 5 6 7 8 9
@import "retina";
 
.body-text {
font-weight: normal;
 
@include retina {
font-weight: 300;
}
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.