这是我用来为背景图像实现此目的的较少 mixin。如果您使用的是 dotLess,retina.js 不适用于背景图像,因为它需要自己的 mixin,而该 mixin 本身使用 dotLess 不支持的脚本评估。
所有这一切的诀窍是获得 IE8 支持。它不能轻易地做背景尺寸,所以基本情况(非移动媒体查询)必须是一个简单的、非缩放的图标。媒体查询然后处理视网膜的情况,并且可以自由使用背景大小类,因为视网膜永远不会在 IE8 上使用。
.retina-background-image( @path, @filename,@extension, @size )
{
.background-size( cover );
background-image: url( "@{path}@{filename}@{extension}" );
@media only screen and ( -webkit-min-device-pixel-ratio: 2 ),
only screen and ( -moz-min-device-pixel-ratio: 2 ),
only screen and ( -o-min-device-pixel-ratio: 2/1 ),
only screen and ( min-device-pixel-ratio: 2 )
{
background-image:url( "@{path}@{filename}@x2@{extension}" );
background-size:@size @size;
}
}
使用示例:
.retina-background-image( "../references/Images/", "start_grey-97_12", ".png", 12px );
这需要你有两个文件:
start_grey-97_12.png
start_grey-97_12@2x.png
其中2x
文件是视网膜的双分辨率。