标签：style blog http io ar 使用 java for sp
随着New iPad的发布，平板也将逐渐进入Retina时代，在高分辨率设备里图片的显示效果通常不尽人意，为了达到最佳的显示效果就需要对图片进行优化，这里介绍一些优化方法：
这一点在任何时候都适用；只是在当前我们可以更多的使用样式表来制作出设计效果，CSS3的圆角、渐变、模盒阴影、字体阴影能帮助我们处理绝大多数视觉效果，并且在各种分辨率下都有良好的表现。
如果必须使用图片，通常是准备2套图片，一套原始尺寸( 为普通设备准备 )，一套两倍尺寸( 为高分辨设备准备 )，再根据设备的分辨率调用不同的图片，调用的方式有2种：
1.使用CSS媒体查询( CSS media queries )，适用于根据不同分辨率来加载不同的背景图片
内联样式：
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2){
/* 2倍分辨率 执行样式*/
}
外链样式：
<link href="retina.css" rel="stylesheet" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)"/>
2.使用Javascript替换图片地址，适用于<img>标签加载的外链图片
首先使用 window.devicePixelRatio 来判断是否为高分辨率，然后替换图片的地址。
想了解此方法的细节，可以参考下这篇分析apple.com方案的文章：
http://blog.cloudfour.com/how-apple-com-will-serve-retina-images-to-new-ipads/
下面是文中提到的 image_replacer.js 源码：
https://gist.github.com/2029936
独特的Icon是大多数网站必备的设计元素，常规的处理方式是使用 sprite 技术，配合上面介绍的 CSS media queries 方法达到最优的显示效果，除此之外前端工程师也在探索一些新的优化方式：
1.Icon Fonts
将图标制作成特殊的字体，然后使用CSS3的自定义字体(@font-face)调用
优点：
缺点：
一些现成的Icon Fonts资源，基本可满足常规的设计需求：
如果你对Icon Fonts的制作方法感兴趣可以参考这篇文章《CSS3 icon font完全指南》：
http://www.qianduan.net/css3-icon-font-guide.html
2.CSS Icon
与Icon Fonts思路类似，不同的是使用CSS来制作各种图标
优点：
缺点：
资源：
关于CSS Icon的制作会在以后做介绍( 先挖个坑=。= )
3.SVG Icon
SVG是一种可伸缩矢量图形，调用方式和jpg、png等格式图片一样，通过CSS即可加载：
background-image: url(‘sprite.svg‘);优点：
缺点：
这个方法有点偏门，来自嗷嗷的一篇文章：Retina 显示屏下 @2x 图片的模拟
优点
缺点
达到高分辨率下最佳的视觉效果固然不错，但加载速度也是用户体验重要指标之一。所以有时候我们也要在优质与高速之间找一个平衡点，这里可以通过 navigator.connection 来判断用户的网络环境，如果是EDGE那还是斟酌下是否要给用户提供高清图片。
标签：style blog http io ar 使用 java for sp
原文地址：http://www.cnblogs.com/aimyfly/p/4043534.html
