前端二倍图的思考（涉及Retina）

EXCELL格式

1 csv格式导出来以后不能用EXCELL打开，会乱码。用记事本打开，而后将“（英文的引号出掉），就能够了。

关于二倍图的操做

概念：

设备像素:也叫物理像素，显示设备上最微小的物理部件。 好比 iphone 5：640 x 1136px. 不一样的机型有不一样的设备像素,固定死的。

这里须要讲一下显示分辨率必定的状况下，显示屏越小图像越清晰，反之，显示屏大小固定时，显示分辨率越高图像越清晰。

• 高分辨率屏幕：在 Windows 系统下，提升屏幕分辨率通常都是经过提升屏幕尺寸。而随着屏幕分辨率的提高，图像和文字显示目标会相应缩小，形成观看极其不便。
  Retina为何那么小的屏幕会有那么大的分辨率。为何那么大的分辨率，非但没有使得文字和图像变小，反而更加清晰了呢？

• 高像素密度屏幕：高ppi, 以评估的 Retina 视网膜屏幕为例，它并非像普通显示器那样经过增大尺寸来增长分辨率，而是靠提高单位面积屏幕的像素数量，即像素密度来提高分辨率，这样就有了高像素密度屏幕。而且mac采用了矢量字体。

CSS像素: css pixel。抽象概念，设备无关像素。DIPS，device-independent像素。在标准状况下一个CSS像素对应一个设备像素。

body{

width:2px;

height:2px;

}

咱们来对比一下这二者的不一样

使用css画了一个2 x 2px的盒子,在普通设备屏幕下是2 x 2px的设备像素。可是在Retina的屏幕下去使用了4 x 4px的设备像素。

device-pixel-ratio:在JS中叫作window.devicePixelRatio
公式： window.devicePixelRatio = 设备像素/css像素。这样，非视网膜屏幕的iphone上，屏幕物理像素320像素，独立像素也是320像素，所以window.devicePixelRatio等于1.
可是在视网膜屏幕的iphone上，屏幕物理像素640像素，独立像素仍是320像素，所以，window.devicePixelRatio等于2.

屏幕密度: ppi :每英寸有多少的像素。视网膜屏幕：将960*640的分辨率压缩在，一个3.5英寸的显示屏内。也就是说，该屏幕的像素密度达到326像素/英寸（ppi）。当ppi>300的时候肉眼就没法分辨分辨率了。

为何须要两倍图/多倍图

1 对于位图而言：

• 当一个光栅图像在标准设备下全屏显示时,一位图像素对应的就是一设备像素,致使一个彻底保真的显示。由于一个位置像素不能进一步分裂，
• 当在Retina屏幕下时，他要放大四倍来保持相同的物理像素的大小，这样就会丢失不少细节，形成失真的情形。换句话说，每一位图像素被乘以四填补相同的物理表面在视网膜屏幕下显示。

工做原理：

方法一：

利用css样式以及放两倍图。

有一张200x200像素的图片（CSS像素，也就是普通像素点或者说是标准像素点），咱们给图片设置一个CSS样式：

img{

width:200px;

height:200px;

}

图片模糊的状况：固定好css像素。将width和height固定好。此时在这个width和height 对于不一样的显示器包含的像素已经肯定了。而后在两种不一样屏幕上放图片：那么Ritina屏幕图片会模糊。由于没有css像素的width height所对应Retina显示器的像素数那么多。你硬生生的把这张图片拉成那么大。必然模糊。
在iPad2或Mini iPad中就是很正常显示的图片；可是，在New iPad中，1个CSS像素点实际上有4个位图像素点，1个分红4个，显然不够分啊，只能颜色近似选取，因而，图片感受就是模糊的。

所以，要想让视网膜屏幕下的图片高清晰显示，咱们须要的图片的原始大小不能是200×200像素，而须要2倍高宽，即400×400像素，CSS像素限制依然是:

img {

width:200px;

height:200px;

}

此时，视网膜屏幕下图片就显示OK了（非视网膜屏幕图片被压缩-减小像素取样——资源浪费！）。

方法二：

查询像素密度：准备两种大小可是同样的图片。利用css的媒体查询或者JS的 Retina.js来调取图片。（浏览器支持是一个问题）
1 css：
能够经过“device-pixel-ratio”属性或者其扩展属性“min-device-pixel-ratio”和“max-device-pixel-ratio”。这几个Media Queries可使用background-image为Retina准备高精密度像素的图片。

.icon {

background-image: url(example.png);

background-size: 200px 300px;

height: 300px;

width: 200px;

}

@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) {

.icon {

background-image: url(example@2x.png);

}

}

2 js：
Retina.js 来处理。

方法三：

放缩放的矢量图形（浏览器支持是一个问题）

得到设备像素比后，即可得知设备像素与CSS像素之间的比例。也就是window.devicePixelRatio。 一倍图：当这个比率为1:1时，使用1个设备像素显示1个CSS像素。 二倍图：当这个比率为2:1时，使用4个设备像素显示1个CSS像素， 三倍图：当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。