关于前端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一倍图和二倍图是不须要改变的。这样就节省了不少时间。