CssGaga AutoRetina

R.I.P. Steve Jobs.

如果你遵从了目录规则 http://www.99css.com/1234,那么要做的只有一件事:添加@2x图片文件

比如之前的图片为

css/img/music.jpg    /* 宽:50px 高:50px */  
css/img/slice/qzone.png    /* 宽:16px 高:16px */  

添加@2x图片后

css/img/music.jpg    /* 宽:50px 高:50px */  
css/img/music@2x.jpg    /* 宽:100px 高:100px */  
css/img/slice/qzone.png    /* 宽:16px 高:16px */  
css/img/slice/qzone@2x.png    /* 宽:32px 高:32px */  

css中background-image不能使用缩写,即下面这种写法不行

background:url('img/1.png')  

必须这么写

background-image:url('img/1.png')  

CssGaga会自动寻找与css中所引用图片同名的@2x文件,如果@2x文件存在,则自动添加retina代码,AutoSprite什么的功能自然不在话下,若@2x文件不存在,则跳过

举例来说,css文件如下

.sp-music{width:50px;height:50px;background-image:url(img/music.jpg);}
.sp-share{width:50px;height:50px;background-image:url(img/share.jpg);}
.sp-app{width:16px;height:16px;background-image:url(img/slice/app.png);}
.sp-pengyou{width:16px;height:16px;background-image:url(img/slice/pengyou.png);}
.sp-qq{width:16px;height:16px;background-image:url(img/slice/qq.png);}
.sp-qzone{width:16px;height:16px;background-image:url(img/slice/qzone.png);}
.sp-weibo{width:16px;height:16px;background-image:url(img/slice/weibo.png);}

经CssGaga处理后

.sp-music{width:50px;height:50px;background-image:url(img/music.jpg)}
.sp-share{width:50px;height:50px;background-image:url(img/share.jpg)}
.sp-app{width:16px;height:16px;background-image:url(sprite/test.png);background-position:0 0}
.sp-pengyou{width:16px;height:16px;background-image:url(sprite/test.png);background-position:-17px 0}
.sp-qq{width:16px;height:16px;background-image:url(sprite/test.png);background-position:-34px 0}
.sp-qzone{width:16px;height:16px;background-image:url(sprite/test.png);background-position:-51px 0}
.sp-weibo{width:16px;height:16px;background-image:url(sprite/test.png);background-position:-68px 0}
}@media only screen and (-webkit-min-device-pixel-ratio:1.25),only screen and (min-resolution:120dpi),only screen and (min-resolution:1.25dppx){.sp-music{background-image:url(img/music@2x.jpg);background-size:50px 50px}
.sp-share{background-image:url(img/share@2x.jpg);background-size:50px 50px}
.sp-app{background-image:url(sprite/test@2x.png);background-position:0 0;background-size:164px 32px}
.sp-pengyou{background-image:url(sprite/test@2x.png);background-position:-33px 0;background-size:164px 32px}
.sp-qq{background-image:url(sprite/test@2x.png);background-position:-66px 0;background-size:164px 32px}
.sp-qzone{background-image:url(sprite/test@2x.png);background-position:-99px 0;background-size:164px 32px}
.sp-weibo{background-image:url(sprite/test@2x.png);background-position:-132px 0;background-size:164px 32px}}

返回CssGaga – 帮助索引