Skip to content

Instantly share code, notes, and snippets.

@ffdead
Created December 5, 2012 12:32
Show Gist options
  • Save ffdead/4215169 to your computer and use it in GitHub Desktop.
Save ffdead/4215169 to your computer and use it in GitHub Desktop.
SASS resolution media query mixin
/* @author 14islands.com
* SASS mixins for future proof resolution media query
*/
@mixin if-min-resolution($dppx) {
@include if-resolution(min, $dppx) {
@content;
}
}
@mixin if-max-resolution($dppx) {
@include if-resolution(max, $dppx) {
@content;
}
}
@mixin if-resolution($prefix, $dppx) {
// 1px = 96dpi
$dpi: $dppx * 96;
@media
(-webkit-#{$prefix}-device-pixel-ratio: #{$dppx}),
( #{$prefix}--moz-device-pixel-ratio: #{$dppx}),
( -o-#{$prefix}-device-pixel-ratio: #{$dppx*2}/2),
( #{$prefix}-device-pixel-ratio: #{$dppx}),
( #{$prefix}-resolution: #{$dpi}dpi),
( #{$prefix}-resolution: #{$dppx}dppx) {
@content;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment