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像素。