EXCELL格式
1 csv格式導出來以後不能用EXCELL打開，會亂碼。用記事本打開，而後將「（英文的引號出掉），就能夠了。css
關於二倍圖的操做
概念：html
設備像素:也叫物理像素，顯示設備上最微小的物理部件。 好比 iphone 5：640 x 1136px. 不一樣的機型有不一樣的設備像素,固定死的。前端
這裏須要講一下顯示分辨率必定的狀況下，顯示屏越小圖像越清晰，反之，顯示屏大小固定時，顯示分辨率越高圖像越清晰。git
-
高分辨率屏幕：在 Windows 系統下，提升屏幕分辨率通常都是經過提升屏幕尺寸。而隨着屏幕分辨率的提高，圖像和文字顯示目標會相應縮小，形成觀看極其不便。
Retina爲何那麼小的屏幕會有那麼大的分辨率。爲何那麼大的分辨率，非但沒有使得文字和圖像變小，反而更加清晰了呢？github -
高像素密度屏幕：高ppi, 以評估的 Retina 視網膜屏幕爲例，它並非像普通顯示器那樣經過增大尺寸來增長分辨率，而是靠提高單位面積屏幕的像素數量，即像素密度來提高分辨率，這樣就有了高像素密度屏幕。而且mac採用了矢量字體。瀏覽器
CSS像素: css pixel。抽象概念，設備無關像素。DIPS，device-independent像素。在標準狀況下一個CSS像素對應一個設備像素。markdown
body{
width:2px;
height:2px;
}
咱們來對比一下這二者的不一樣
使用css畫了一個2 x 2px的盒子,在普通設備屏幕下是2 x 2px的設備像素。可是在Retina的屏幕下去使用了4 x 4px的設備像素。iphone
device-pixel-ratio:在JS中叫作window.devicePixelRatio
公式： window.devicePixelRatio = 設備像素/css像素。這樣，非視網膜屏幕的iphone上，屏幕物理像素320像素，獨立像素也是320像素，所以window.devicePixelRatio等於1.
可是在視網膜屏幕的iphone上，屏幕物理像素640像素，獨立像素仍是320像素，所以，window.devicePixelRatio等於2.post
屏幕密度: 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像素。