蘋果公司率先在許多裝置上使用了視網膜屏標準。2012年釋出的MacBook Pro上就已經開始使用了視網膜屏顯示器，iOS裝置使用了該顯示器的更是不勝列舉。這意味者消費市場會不斷增長，而設計人員必須跟上這一變化。
在本指南中，我們分享的是有關視網膜（Retina）螢幕的用途及想法。構建於原生Android或iOS的APPS對於這個特性的應用會簡單些，而在網頁上就會複雜很多。如果你對視網膜屏相關的設計不是很熟的話，要掌握這些需要做一些練習。當你的作品能適配各種顯示器，並有完美而精細的展示效果時，所有的付出都會是值得的。
關於視網膜屏的基礎
你考慮螢幕畫素密度的時候，一般用相應的物理單位PPI（Pixels Per Inch所表示的是每英寸所擁有的畫素（Pixel）數目。因此PPI數值越高，即代表螢幕能夠以越高的密度顯示影象。當然，顯示的密度越高，擬真度就越高。）這是測量共同單元，它改變著每個裝置。常規的螢幕中有一定的畫素在一塊1×1英寸的螢幕中。
而在視網膜屏中，畫素的數量將要求增加1倍。蘋果就是配備了一個這個具有雙倍畫素顯示能力的物理屏。這個技術被認為是已經到達人眼識別極限的。
可以縮放的頁面元素，如：文字、CSS容器和SVG影象，它們可以自動適應雙倍解析度。點陣圖和固定寬度的元素則會自動拉昇。設計適用於視網膜屏的網站是為了讓你的頁面內容更靈活的顯示。圖片應該是SVG格式的，你也可以為這個顯示器設計雙倍畫素的圖片。
用字型代替圖示
一些熟悉CSS3的設計師會知道自定義字型。您的字型包可用是本地連線也可以是遠端連線，這樣在CSS中形成一個新的家庭。而且裡面除了可包含數字和字母外，還可以包含圖示字型。
這樣做比做圖示向量化和建立雙倍畫素圖示要好得多。圖示字型會根據螢幕大小，自然擴大。用百分比或EMS為單位將提高其的適配性。你可以用HTML程式碼寫圖示，這樣服務區就無須請求HTTP檔案。
這雖然會讓圖片看起來非常完美，但是也會產生很多程式碼。大多數圖示會像字型一樣顯示，單色和一些文字效果。如果這些能提高您網站設計的效率，我強烈推薦使用它。否則你在圖片和字型之間做判斷也會很麻煩。
如果你正在找一個漂亮的字型合集，可以開始瀏覽We Love Icon Fonts。很多設計師在Github共享他們的檔案，而這些內容也不會100%被Google搜錄。你可以利用此工具定位字型圖示，也可以上傳自己的。
可縮放的向量圖形
向量圖形一般用於logo和圖示設計，並需要為不同的解析度製作不同的尺寸，但是這些圖形在很多瀏覽器裡都不支援，直到現在一些關於SVG的瀏覽器標準釋出後，才開始有了很好的支援。
圖形本身的屬性特徵包括顏色、曲線、線段、陰影和其他典型的資料。老的瀏覽器可能不支援這些圖形，網頁無法渲染，但是你可以做一個類似 SVGeezy 的圖形處理。
要來設計一套完整的圖示，你需要一定的學習和擁有相關的工具。如果你還不是一個成熟的設計師，去尋找免費資源是一個好的做法，我推薦一個地址給開發者們：primer to hacking SVGs
CSS3視網膜屏背景圖片
兩種常見的視網膜屏圖形切換方式：1、使用CSS3 media queries。2、使用JavaScript庫的功能。但CSS3有些舊瀏覽器依然不支援，而JavaScript也可能會被人禁用。這兩種方式都能選，主要看你的目的，以及你如何建立你的網站。
利用CSS3 media queries實現網站圖片切換，需要在視網膜屏和非視網膜屏的網站上檢查，我們設定視網膜屏的背景圖片可以通過一種方法。看看這段來自於this Sitepoint article的程式碼是如何做的。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#myimage { width: 400px; height: 300px; background: url('lo-res.jpg') 0 0 no-repeat; } @media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (-moz-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) { #myimage { background-image: url('hi-res.jpg'); } } |
檢查多種尺寸的裝置螢幕，最小的畫素比往往會反饋一些同樣的值，現代哪些支援CSS3的瀏覽器會迅速作出反應，它幾乎是瞬間呈現給訪問者的。今天media queries是建立在新的CSS3規範上的。雖然這些東西很流行，但是趨勢並不是那麼好，做為設計師要在實踐中去學習這些。
JavaScript 實現
並非所有的瀏覽器都支援CSS3效果，雖然視網膜顯示器上的大多數瀏覽器一定會支援。但是如果要保險，適當的情況下，我還是建議使用 JavaScript 的解決方案。如智慧手機和電腦都預設支援了JS。
我想給大家分享兩個JS庫，這些絕對值得您擁有。第一個叫做Foresight.js可以檢測裝置是否具有視網膜屏，然後它會根據您的設定來自動拉伸影象。以下是一段演示程式碼。
live demos（點選檢視演示）
另外一個庫我們也越來越青睞，Retina.js。它是一個新的開源jQuery外掛，它能完成很多和Foresight一樣的任務。他將判斷使用者是否有視網膜屏的顯示器，然後使用@2倍的圖片來替換常規圖片。如果伺服器上沒有獨立的檔案，它就只會拉昇原來的。這是一個很小的指令碼，使用也很簡單。
總結
我希望這些提示能讓你開始探索如何建立靈活的準視網膜屏網站佈局設計。規劃設計好，並利用這些知識加快你的程式。如何讓你的網站開起來是個響應式風格？明智的做法是選擇好相應的技術，來處理好視網膜屏顯示。如果你有任何問題和建議，請在下面討論吧。