Last active
December 14, 2015 22:19
-
-
Save takunagai/5157498 to your computer and use it in GitHub Desktop.
高解像度(Retina)対応 背景画像 SCSS Mixin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// A helper mixin for applying high-resolution background images (http://www.retinajs.com) | |
//画像名とサイズを指定すると、高解像度ようのメディアクエリーを作成、倍の解像度の画像を表示してくれるミックスイン | |
//retinajs.com で紹介されているが、ratina.jsとは関係ない | |
@mixin at2x($image_name, $w: auto, $h: auto, $extention: '.png') { | |
background-image: image_url($image_name + $extention); | |
$x2img : $image_name + '@2x' + $extention; | |
@media all and (-webkit-min-device-pixel-ratio : 1.5) { | |
background-image: url($x2img); | |
background-size: $w $h; | |
} | |
} | |
/* 使用サンプル | |
//SCSS | |
#logo { | |
.at2x('/img/myimg', 200px, 100px, '.png');//引数:画像パス,width,height,拡張子(pngなら不要) | |
} | |
//result CSS | |
-> 通常解像度:/img/myimg.png(200 x 100px) | |
-> 高解像度 :/img/myimg@2x.png(400 x 200px) | |
#logo { | |
background-image: url('/img/myimg.png'); | |
} | |
@media all and (-webkit-min-device-pixel-ratio: 1.5) { | |
#logo { | |
background-image: url('/img/myimg@2x.png'); | |
background-size: 200px 100px; | |
} | |
} | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment