Useful Information Note

从Web开发者的角度如何优雅地解决视网膜屏上看网页图片模糊的问题

使用

img-set:background-image: img-set( url(a.png) 1x, url(a@2x.png) 2x );

或 Media Query + background-size:

.sprite {
   background-image: url(sprite.png);
   background-size: 100px 200px;      
}
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio:2) {
   .sprite {
       background-image: url(sprite@2x.png);
   }  
}

以上两种方式都不会给标准 DPR 设备带来额外的流量开销。知乎用的是第二种,请仔细看下 Inspector 中的选择器。

上一篇:必知的 15 个jQuery小技巧(干货)
下一篇:js深拷贝和浅拷贝
css