自從視網膜屏幕的MacBook Pro發(fā)行到現(xiàn)在已經過了很久了，但很多web開發(fā)者們還在抓著胸前的鍵盤，忽視進步，將自己推入一種黑暗的“像素恐懼癥”的深淵。

像素就是未來，它會不斷出現(xiàn)在iPad、MacBook、iPhone或Android手機上。大量照片會向你撲過來，圖標會浸透你的靈魂，字體通過屏幕像波爾卡舞的舞者一樣給你滴＊＊藥。

視 網膜屏幕的MacBook Pro目前來說任然算是奢侈品,但我們已經有了快一年的視網膜屏幕iPad， 兩年半的iPhone 4。高清晰度顯示的廣泛使用率已經5倍于“江南style”。然而，要讓互聯(lián)網完全采用適合視網膜屏的圖片仍然是有困難的。創(chuàng)業(yè)公司們在完全無視視網膜屏 的情況下，苦心設計數月他們的新網站，當人們在視網膜顯示屏下看到這個網站時，它就像一個亂七八糟的像素團兒。

這是一個實際的、未經修飾的截圖:

看到了嗎?像素無處不在。我甚至看不到網站了：所有我能看到的就是黃色像素，棕色像素，紅色像素…

有解決辦法：

這個解決辦法很簡單，但很少實現(xiàn)：提供高分辨率的設備。

有 一些方式可以做到這一點。Apple.com可能在互聯(lián)網上有兩個站點，大多數轉移到高分辨率的資源上了，但他們使用了一些janky Javascript的技術先下載1x圖像(正常的分辨率)，派一個請求來測試2x圖像(兩倍大小)是否存在，如果存在就下載，并從帶有2x圖像的DOM 里交換1x圖像。你的眼睛明顯會感覺到像有白內障，因為你在適應模糊形象的一瞬間就轉變?yōu)橐恍┝钊耸娣�清晰的圖像。當然，視網膜設備會產生額外的開銷：加 載兩種圖片和一個額外的請求。

最簡單的方法就是直接加載2x資源: 

<img src="http://www.argcandargv.com/skin/default/image/lazy.gif" class="lazy" original="/images/header-500px.png" width="250"/>

現(xiàn) 代瀏覽器對頁面資源按比例縮小。這對圖像來說是很不錯的，比如logo——你想要像素以完美的比例展現(xiàn)較小的尺寸，那么你可以派一個設計師去參與計算所需 要的不同尺度的比例。對于低精度的屏幕你承擔額外的帶寬開銷，但是那能用CSS選擇器解決，根據像素密度顯示資源。你甚至可以用SCSS或其他前端框架自 動實現(xiàn)。除此之外，探索像SVG和webfonts的矢量技術。創(chuàng)建您自己的圖標設置或使用其他工具集，他們能夠發(fā)揮巨大的作用，使得按鈕和導航控件真正 的在高DPI屏幕上流行。你知道這樣做需要更長時間嗎？或許你認為這很容易，恐怕你只是拿最喜歡的1992年16x16圖標來吹噓成128x128的，這 或許就是你在過去的幾十年里所做的吧。高分辨率顯示還沒有被廣泛的使用，但到2013年底，肯定會開始改變。爭取在曲線上升開始前行動吧.

1x1.GIF

還記得ajax,DHTML,以及CSS發(fā)布之前的日子嗎？我們有5年時光，倍感光榮地使用

標簽及絕佳的1X1.gif圖像，他們確實為我們服務的很好。但接下來的事情就像禪宗花園爆炸了一樣，從根本上改變了我們對互聯(lián)網的整體看法。

這 就是我們現(xiàn)在所處的環(huán)境。你最好抓緊時間提供一些適合視網膜屏幕的圖片，否則你的公司很快就會垮掉，沒有人會使用你的產品，你的孩子將會輟學甚至吸毒。不 管你喜不喜歡，他們正在做他們的，孩子們正在用高分辨率的視網膜屏iPad上傳自己的照片，這可是去年圣誕節(jié)你送給他們的禮物哦。

為了保護你的資產，趕緊去更新你的CSS吧！

via gbtags

來源：你在視網膜技術上太遜了，快來補充知識吧！