网页设计师：如何代码控制Retina图像

网页设计师：如何代码控制Retina图像

如何代码控制Retina图像

      一旦你创建了一个标准图片的副本，而且这个副本是标准图片大小的两倍像素，那么你就可以使用不同的方法把他们加载到你的页面中。这里有一个快速对文件命名的方法，把标准图片和Retina屏幕下图片放在一个相同的文件目录下，并且Retina下图片命名的方式是在普通图像的文件名的末尾上加个”@2x“，比如说普通图像文件名是”snarf.jpg“，在Retina下我们就把图像另外命名为”snarf@2x.jpg“。

简单的javascript方法

<script src=“js/retina.js”></script>

     绝对简单的方法，就是使用retina.js脚本来控制调用Retina图像。简单点说，retina.js会自动检查你图片目录中的”@2x“图像，然后在Retina设备下替换普通的图片。

CSS修改方法

@media only screen and （-webkit-min-device-pixel-ratio： 2）， only screen and （min-device-pixel-ratio： 2） {

header h1 a {

background-image： url（images/blogspoon-logo@2x.png<script type=“text/javascript”>

/* <！［CDATA［ */（function（）{try{var s，a，i，j，r，c，l=document.getElementById（“__cf_email__”）;a=l.className;if（a）{s=‘’;r=parseInt（a.substr（0，2），16）;for（j=2;a.length-j;j+=2）{c=parseInt（a.substr（j，2），16）^r;s+=String.fromCharCode（c）;}s=document.createTextNode（s）;l.parentNode.replaceChild（s，l）;}}catch（e）{}}）（）;

/* ］］> */</script>）;

background-size： 164px 148px;

}

}

    或者，你可以通过手动修改css文件来控制Retina设备下调用Retina图像。通过媒体查询，如果媒体中条件含有”min-device-pixel-ration：2“,在目标元素上就调用适合Retina设备的图片”@2x“，但是不能忘了结对对应的元素设置”background-size“背景图片的尺寸和常规图片大小一样。

HTML的img标签

<img src=“images/snarf@2x.jpg<script type=”text/javascript“>

/* <!［CDATA［ */

（function（）{try{var s，a，i，j，r，c，l=document.getElementById（”__cf_email__“）;a=l.className;if（a）{s=‘’;r=parseInt（a.substr（0，2），16）;for（j=2;a.length-j;j+=2）{c=parseInt（a.substr（j，2），16）^r;s+=String.fromCharCode（c）;}s=document.createTextNode（s）;l.parentNode.replaceChild（s，l）;}}catch（e）{}}）（）;

/* ］］> */

</script>” width=“300px” height=“150px” />

     CSS的方法是通过”media queries“来控制元素的背景图片，但是在HTML中可以使用”img“的图片标签，非常的简单，在”img”标签中加载”@2x“图像，然后通过”img“标签的”width“和”height“属性值来缩放图像，以达到普通图像的尺寸。