Skip to content

Instantly share code, notes, and snippets.

@gspice
Forked from ffdead/if-resolution.scss
Created February 9, 2016 20:51
Show Gist options
  • Save gspice/ed64da5269cb1987fe8e to your computer and use it in GitHub Desktop.
Save gspice/ed64da5269cb1987fe8e 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