關於前端Retina 屏幕兼容和基於Retina 屏幕兼容的雪碧圖技巧

因爲蘋果電腦的普及，因此Retina 屏幕兼容愈來愈重要，在普通屏幕上正常的背景，在Retina 屏幕上都會發虛。

首先新建一個scss文件，起名爲utils.scss ,在文件中寫入下面代碼：

/* Retina 屏幕兼容 */
@mixin ratio(){
@media only screen and (-webkit-min-device-pixel-ratio: 1.5){
@content;
}
@media only screen and (min--moz-device-pixel-ratio: 1.5){
@content;
}
@media only screen and (min-device-pixel-ratio: 1.5){
@content;
}
@media only screen and (-o-min-device-pixel-ratio:3/2){
@content;
}
}
@mixin ratioBackground($bgcolor:transparent,$url:'',$size:contain,$x: 0px,$y: 0px ){
@media only screen and (-webkit-min-device-pixel-ratio: 1.5){
background:$bgcolor url($url) $x $y no-repeat;
background-size:$size;
}
@media only screen and (min--moz-device-pixel-ratio: 1.5){
background:$bgcolor url($url) $x $y no-repeat;
background-size:$size;
}
@media only screen and (min-device-pixel-ratio: 1.5){
background:$bgcolor url($url) $x $y no-repeat;
background-size:$size;
}
@media only screen and (-o-min-device-pixel-ratio:3/2){
background:$bgcolor url($url) $x $y no-repeat;
background-size:$size;
}
}
@mixin ratioBackgroundPosition($x:0px ,$y:0px ){
@media only screen and (-webkit-min-device-pixel-ratio: 1.5){
background-position:$x $y;
}
@media only screen and (min--moz-device-pixel-ratio: 1.5){
background-position:$x $y;
}
@media only screen and (min-device-pixel-ratio: 1.5){
background-position:$x $y;
}
@media only screen and (-o-min-device-pixel-ratio:3/2){
background-position:$x $y;
}
}

而後在作項目時候，在scss文件中引用這個utils.scss文件，

具體使用方法以下

咱們這裏須要兩張雪碧圖，一張正常的一倍的，一張2倍圖。

這裏須要注意的是這裏面的參數

1.@include ratioBackground 是兼容Retina 屏幕須要引入的2倍那張圖，$size這個參數記得必定要寫成跟一倍圖同樣的大小。

2.@include ratioBackgroundPosition其實就是background-position，$x:0px ,$y:0px就很好理解了。 

這樣就能夠坐到兼容Retina 屏幕了。

這裏還要說一下兼容Retina 屏幕時雪碧圖要注意的問題。

雪碧圖對於前端來講並不陌生，它的好處我在這裏也很少說，想必大多數前端都知道。

我這裏要說的是基於上面的文件，咱們怎麼作雪碧圖更簡單。

你們都知道通常兼容Retina 屏幕時候，都是一些小圖標，這時候咱們作雪碧圖就很是重要了。

首先咱們須要一套2倍的圖片。而後將2倍圖片變成雪碧圖，像這樣

而後咱們在ps中選擇圖像------圖像大小，而後將大小變成以前的二分之一，像這樣

以後生成一個一倍圖片。

這樣作的好處是，咱們在寫的時候，只須要改變引用的圖片，和$size,但background-position一倍圖和二倍圖是不須要改變的。這樣就節省了不少時間。