网页高清屏和retina（视网膜）屏的双倍图解决办法

2016-02-06 本文已影响1312人恬雅过客

通过搜集相关资料，发现一个比较普遍的解决方案：retina.js+CSS Media Queries。
retina.js
retina.js下载地址：retina.js官网下载和免费cdn。
详细介绍和步骤啥的，看这个《走向视网膜（Retina）的Web时代》和《如何一步步把网站Retina优化》文章。
retina.js针对img标签的图片，直接用就行。背景图片还是得用CSS Media Queries
示例代码：

<div class="img">
  [站外图片上传中……(3)]
  [站外图片上传中……(4)]
  <div class="logo"></div>
</div>

CSS Media Queries
css属性：device-pixel-ratio和-webkit-image-set
先看看两者的兼容性：

第二个截图，不是确切。加上私有属性“--webkit-”，Safari 6+和chrome 21+都支持的。这个属性仅是CSS4的一个草案。（注：第二种方法没法用于img标签。）
看见上面两种方法的兼容性都不咋地好，你可能会立马否决使用它。其实不然，上面提到我是看了好几个网站的源码才偶然发现第二种方法的，那么久给你看看结果：苹果网站（第一种），华为（第一种，不过由于它使用的jquery fancybox插件，是这个插件带得，可以估计不算在内。），魅族（第二种），小米（第二种），锤子（第二种），腾讯首页（第二种）。
再者你仔细想想，retina屏的用户群，都是些苹果的手机(iphone)和ipad以及笔记本（rmbp）等等设备，也就恰好在该属性兼容范围内。
示例代码：

.test {
  background-image: url('img/logo.jpg'); 
  background-image: -webkit-image-set(url('img/logo.jpg') 1x,url('img/logo@2x.jpg') 2x);
  background-size: 425px 195px;
  width: 425px;
  height: 195px;
}
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5),
(min-resolution: 192dpi) {
  .logo {
    background-image: url('img/logo@2x.jpg');
    background-size: 425px 195px;
    width: 425px;
    height: 195px;
   }
 }

网页高清屏和retina（视网膜）屏的双倍图解决办法

参考

猜你喜欢

热点阅读