Skip to content

Instantly share code, notes, and snippets.

@kwaledesign
Created April 10, 2013 21:43
Show Gist options
  • Save kwaledesign/5358725 to your computer and use it in GitHub Desktop.
Save kwaledesign/5358725 to your computer and use it in GitHub Desktop.
hiDPI mixin for passing content blocks into hi-rez media queries
/**
* hiDPI Mixin
*
* http://css-tricks.com/snippets/css/retina-display-media-query/
*
* $resolution: 1.25, 1.3, 1.5, 2;
*/
@mixin img-rez($resolution) {
@if $resolution == 1.25 {
@media
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi){
/* 1.25 rez specific stuff here */
@content;
}
}
@if $resolution == 1.3 {
@media
(-webkit-min-device-pixel-ratio: 1.3),
(min-resolution: 124.8dpi){
/* 1.3 rez specific stuff here */
@content;
}
}
@if $resolution == 1.5 {
@media
(-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi){
/* 1.5 rez specific stuff here */
@content;
}
}
@if $resolution == 2 {
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* 2x rez specific stuff here */
@content;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment