眼睛是心靈的窗戶，也是蒙蔽你的一種途徑。
假設，我給你一張圖片，你覺得肉眼可以觀察到全部的細節嗎？
屏幕上一張清晰的圖片肉眼在屏幕上看到圖片的清晰度由三個因素決定，一是圖片像素本身是否精細，二是屏幕解析度，三是屏幕大小。
我們來逐步分析它們之間的關係：
屏幕解析度屏幕解析度也就是設備解析度，設備像素，它是物理的像素，比如，新的iPhone7，屏幕解析度是1334 x 750像素解析度，326 ppi。
圖像大小如果你學過《數字圖像處理》這門課，那你對下面的解釋就是非常熟悉了。
位圖是由像素（Pixel）組成的，像素是位圖最小的信息單元，存儲在圖像柵格中。每個像素都具有特定的位置和顏色值。按從左到右、從上到下的順序來記錄圖像中每一個像素的信息，如：像素在屏幕上的位置、像素的顏色等。位圖圖像質量是由單位長度內像素的多少來決定的。單位長度內像素越多，解析度越高，圖像的效果越好。
假設，以上這個logo的圖像大小是1334 x 750像素和iPhone7屏幕解析度一樣，那麼,一位圖像素對應的就是一個設備像素，這就是會是一個完全保真的顯示。因為一個位置像素不能進一步分裂，我想這一點應該大家非常容易理解，也就是一個蘿蔔一個坑。
屏幕解析度和屏幕尺寸相信大部分人對上面這個設置肯定特別熟悉，有些人可能對XP，甚至98系統的樣式更熟悉（一不小心暴露了年齡），在Windows系統下，提高屏幕解析度一般都需要提高屏幕尺寸。
因為在固定屏幕的情況下，提高屏幕解析度（如上圖），圖像和文字顯示目標會相應縮小，原因是系統並不會自動根據屏幕尺寸和解析度關係相應的調整文字和圖標的大小，這是Windows系統自身的行為。
我相信，如果家裡有年長的人使用電腦，肯定屏幕解析度調的很低，因為這樣文字和圖標才會比較大，我家06年買的臺式機就是這樣。
也因此，我們很容易有一個錯覺，那就是屏幕越大，解析度就能越大（在單位面積內像素數量固定的情況下，尺寸越大，單個屏幕擁有的像素就越多，解析度自然就越大）。
直到，蘋果Retina屏幕的出現，原來小屏幕也可以擁有大解析度。
PPI的概念PPI，像素密度，即每英寸所擁有的像素數目（比如：上面iPhone 7的PPI是326），PPI數值越高，代表顯示屏能夠以越高的密度顯示圖像，畫面的細節就會越豐富。
以Retina屏幕為例，它並不是像普通顯示器那樣通過增大尺寸來增加解析度，而是靠提升屏幕單位面積內的像素數量，即像素密度來提升解析度，這樣就有了高像素密度屏幕。
根據上面的分析，解析度提升了，那麼圖標和文字尺寸就會變小，但是Mac的作業系統不同，它自動採取相應的模式（如Mac下的HiDPI）進行適配，將縮小後的字體（蘋果一直採用矢量字體）和圖標重新放大，這樣蘋果用了更多的像素數來顯示同樣的內容，所以顯示尺寸仍然不變。
蘋果將「高像素密度屏幕」的概念營銷出一個專業的術語「Retina」，將其稱為雙密度顯示，聲稱人類的肉眼將無法區分單個像素。
當一個顯示屏像素密度超過300ppi時，人眼就無法區分出單獨的像素。這也是講：顯示設備清晰度已達到人視網膜可分辨像素的極限。因此，行動電話顯示器的像素密度達到或高於300ppi就不會再出現顆粒感，而手持平板類電器顯示器的像素密度達到或高於260ppi就不會再出現顆粒感，蘋果電腦Mac的Retina顯示器像素密度只要超過200ppi就無法區分出單獨的像素。
好，說了這麼多，都是談屏幕的問題，貌似和前端開發沒有什麼關係，我又不是要買新手機（呵呵），那麼現在，我們現在來談談前端的問題。
Web中的像素（CSS像素）CSS像素是一個抽象概念，設備無關像素，簡稱-「DIPS」，device-independent像素，主要使用在瀏覽器上，用來精確的度量（確定）Web頁面上的內容。
在標準情況下一個CSS像素對應一個設備像素。
.box { width: 200px; height: 300px; font-size: 12px;}
上面的代碼，將會在顯示屏設備上繪製一個200x300像素的盒子，在標準屏幕下，它佔據的就是200x300設備像素。但是在Retina屏幕下，相同的div卻使用了400x600設備像素，保持相同的物理尺寸顯示，導致每個像素點實際上有4倍的普通像素點。
對於圖片來說也是如此：
這個時候，屏幕會怎麼處理呢？其實，有點類似圖像軟體的放大圖片功能，採用自有的算法（圖像處理算法）計算放大方式。只不過，這裡是蘋果Retina屏幕的計算方法，一個CSS像素點實際分成了四個，造成顏色肯定會存在偏差（非全保真的顯示），於是，我們看上去就變得模糊了（特別是圖片，非常的明顯）。
開發當中遇到這樣的事情，我們應該怎麼處理呢？這時，我們需要引出devicePixelRatio的概念。
devicePixelRatio設備像素比window.devicePixelRatio是設備上物理像素和設備獨立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips
普通密度桌面顯示屏的devicePixelRatio=1
高密度桌面顯示屏(Mac Retina)的devicePixelRatio=2
主流手機顯示屏的devicePixelRatio=2或3
舉例說明，一張100x100的圖片，通過CSS設置它{ width:100px; height:100px }。在普通密度桌面顯示屏的電腦上打開，沒有什麼問題，但假設在手機/或者Retina屏幕的Mac，按照邏輯解析度來渲染，他們的devicePixelRatio=2，那麼就相當於拿4個物理像素來描繪1個電子像素。這等於拿一個2倍的放大鏡去看圖片，圖片可能因此變得模糊。
代碼如何解決呢？原理我們明白了，那麼從代碼層面，我們應該如何實現呢？
一個常見的做法是把圖片換成200x200的，CSS寬高不變，仍然是{ width:100px; height:100px }，這樣，CSS寬高換算成物理像素是200x200，圖片也是200x200，就不會變糊了。可以採用媒體查詢和JS操作的方式
CSS Media Queries#element { background-image: url('hires.png'); }@media only screen and (min-device-pixel-ratio: 2) { #element { background-image: url('hires@2x.png'); }}@media only screen and (min-device-pixel-ratio: 3) { #element { background-image: url('hires@3x.png'); }}
JS查詢retinajs庫
是不是適配Retina屏幕所有的圖片都需要切換呢？不是，一般情況下，不需要針對網站上的所有圖片都提供兩個版本（非Retina屏幕和Retina屏幕），大部分圖片縮放並不會太多的影響用戶的體驗。
常常需要被處理的圖片有：網站的logo、彩色圖片圖標，因為他們的圖像大小都偏小，在Retina上物理像素放兩倍顯示就會出現模糊情況，這個時候，你就需要通過媒體查詢或者JS操作來替換圖片。
最後眼睛是心靈的窗戶，也是蒙蔽你的一種途徑，帶上知識的眼鏡，將世界看個清楚。
- 相關閱讀 -
你聽說過「風格指南驅動開發」嗎？
前端框架這麼多，該何去何從？
點擊【閱讀原文】可至洞見網站查看原文&綠色字體部分的相關連結。
本文版權屬ThoughtWorks公司所有，如需轉載請在後臺留言聯繫。