自從視網膜屏幕的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)橐恍┝钊耸娣逦膱D像。當然,視網膜設備會產生額外的開銷:加 載兩種圖片和一個額外的請求。
最簡單的方法就是直接加載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
來源:你在視網膜技術上太遜了,快來補充知識吧!