資訊專欄INFORMATION COLUMN
摘要：我們用小米舉例，屏幕像素物理像素為，設備獨立像素為，也就是說，一個設備獨立像素就包含個物理像素，同時我們能得出。
本文主要闡述移動端布局中常遇到的一些基本概念，這些概念也適用于PC端，這些概念大概有：像素（pixel），ppi，分辨率，物理像素（physical pixel）， CSS像素，設備獨立像素（devicedependent pixel）
像素像素是圖像顯示的基本單位，同時像素是一個抽象概念，是一個相對單位
PPIPPI全稱：pixel per inch，也就是每英寸像素值，更確切的說法應該是，像素密度，也就是單位物理面積內擁有像素值的情況
假設我們有上面這幅圖，大小都一樣，比如是1 * 1大小，但是物理面積內的PPI分別為1，2，5，10，20，50，100。從圖中很明顯的看到，隨著PPI的增大，像素數越來越多，圖像也就越來越清晰，我們的像素的長度同時也變為了，1/1，1/2，1/5，1/10，1/20，1/50，1/100。可以得知，像素在不同的ppi下面都不同，討論像素的大小也就沒有意義了。
分辨率泛指顯示系統對細節的分辨能力，能顯示圖像都叫顯示系統，比如顯示器，投影儀，照片。
分辨率常用的單位有：dpi（點每英寸），lpi（線每英寸），和ppi（像素每英寸）。從單位來看，分辨率是一個比值，與物理單位的比值。所以，當有人說這個屏幕分辨率是640*1320，你要留個心，問問單位是ppi？dpi？lpi？
retina顯示屏不僅僅是屏幕的革新，對于我們深刻理解各種單位其實理解有一個很大的幫助，我們先來由淺入深的分析一下什么是retina顯示屏，它提出的概念是什么？
retina采用的技術是，將更多的像素點壓縮在一塊屏幕里，從而達到更高的分辨率并提高屏幕顯示的細膩程度，我們來看一下未使用retina屏的iPhone3GS和率先使用的iPhone 4
iphone 3GS
iphone 4
兩代 iPhone 的物理尺寸（屏幕寬高有多少英寸）是一樣的，從上圖可以看出，iphone 4 的顯示效果要明顯好于 iphone 3GS，雖然 iPhone 4 分辨率提高了，但它不同于普通的電腦顯示器那樣為了顯示更多的內容，而是提升顯示相同內容時的畫面精細程度。這種提升方式是靠提升單位面積屏幕的像素數量，即像素密度來提升分辨率，這樣做的主要目的是為了提高屏幕顯示畫面的精細程度。以第三代 MacBook Pro with Retina Display 為例， 工作時顯卡渲染出的 2880x1880 個像素每四個一組，輸出原來屏幕的一個像素顯示的大小區域內的圖像。這樣一來，用戶所看到的圖標與文字的大小與原來的 1440x900 分辨率顯示屏相同，但精細度是原來的 4 倍。
注意：在桌面顯示器中，我們調整了顯示分辨率，比如從 800 * 600 調整到 1024 * 768 時，屏幕的文字圖標會變小，顯示的內容更多了。但 Retina 顯示方式不會產生這樣的問題，或者說， Retina 顯示技術解決的是顯示畫面精細程度的問題，而不是解決顯示內容容量的問題。這個怎么理解呢？就是說，讓我們看下一個設備像素的概念
設備獨立像素ddp為什么是 “每四個一組”？而且要讓這四個一組來顯示 “原來屏幕的一個像素”？這大概就是 Retina 顯示技術的一種表現吧。而這 “每四個一組” 的 “大像素”，可以被稱作 “設備獨立像素”， device independent pixel ，或者 density-independentpixel ，它可以是系統中的一個點，這個點代表一個可以由程序使用的虛擬像素，然后由相關系統轉換為物理像素。
“設備獨立像素” 也有人稱為 “CSS 像素”，一種形象的說法，更傾向于表明與 CSS 中尺寸的對應。
設備獨立像素與物理像素的對應關系，可以這樣看：
我們再retina顯示屏處挖了一個坑，現在我們要填一下。為什么桌面顯示器放大分辨率就顯示的內容更多呢？而retina內容不變，但是變為更加細膩？這就是設備獨立像素的影響。retina的設備獨立像素是固定的，當我們增加像素點時，讓更多的像素點渲染一個設備獨立像素所在區域，這樣必然時更細膩的，但是桌面顯示器，一個設備獨立像素占一個坑，隨著分辨率提高，像素點增加，并不會提升獨立像素所包含的像素點，而是隨著像素點增加，獨立像素也越來越多，一個像素點對應一個獨立像素，這樣就顯示的內容就更加多了
物理像素設備能控制顯示的最小單位，我們可以把這些像素看作成顯示器上一個個的點。
我們在設備獨立像素中提到的，為什么retina是“每四個一組”，這里的四個就表示物理像素，組成的這一組就叫設備獨立像素。這個設備獨立像素頗有我們前端CSS像素的味道
作為 Web 開發者，我們接觸的更多的是用于控制元素樣式的樣式單位像素。這里的像素我們稱之為 CSS 像素。
CSS 像素有什么特別的地方？我們可以借用 quirksmode 中的這個例子：
假設我們用 PC 瀏覽器打開一個頁面，瀏覽器此時的寬度為 800px，頁面上同時有一個 400px 寬的塊級元素容器。很明顯此時塊狀容器應該占頁面的一半。
但如果我們把頁面放大（通過 “Ctrl 鍵” 加上 “+ 號鍵”），放大為 200%，也就是原來的兩倍。此時塊狀容器則橫向占滿了整個瀏覽器。
吊詭的是此時我們既沒有調整瀏覽器窗口大小，也沒有改變塊狀元素的 css 寬度，但是它看上去卻變大了一倍——這是因為我們把 CSS 像素放大為了原來的兩倍。
CSS 像素與屏幕像素 1：1 同樣大小時：
CSS 像素 (黑色邊框) 開始被拉伸，此時 1 個 CSS 像素大于 1 個屏幕像素
也就是說默認情況下一個 CSS 像素應該是等于一個物理像素的寬度的，但是瀏覽器的放大操作讓一個 CSS 像素等于了兩個物理像素寬度。在后面你會看到更復雜的情況，在高 PPI 的設備上，CSS 像素甚至在默認狀態下就相當于多個物理像素的尺寸，換句話說，也就是相當于一個設備獨立像素。
從上面的例子可以看出，CSS 像素從來都只是一個相對值。
設備像素比（DevicePixelRatio）設備像素比 = 設備物理像素 / 設備獨立像素
設備像素比在 js 中可以通過 devicePixelRatio 的參數取得（需要頁面的 viewport 設置為 content=”width=device-width”）
iPhone 4 的設備像素比為 2，線長（橫向、縱向、對角線）上的物理像素數與設備獨立像素數的對應關系即為 2。
根據這個對應關系，一般可以通過屏幕的物理分辨率和設備像素比確定設備獨立像素數。
那么在我們做移動端網站時，將 viewport 設置了 content=”width=device-width”，設備獨立像素也就等于 CSS 像素。
硬核總結：我以一個移動端常見的問題來將上面的名詞進行一個串聯。我們部門由于只做小米瀏覽器的開發，所以適配對于我們來講其實并不是很復雜，因為我們的屏幕dpr主要是2/2.75/3，而我們的設計師一般設計稿也是依據iPhone 6s進行設計，所以我只分析一下dpr為3這種情況。我們前端拿到設計稿的時候，切圖保存要做的第一件事，就是將切圖設置為3的倍數，比如212*112，我們就手動微調為213*114，這是為什么呢？因為我們移動端需要的圖片還得原圖除以3，也就是圖片需要是71*38。
我們上面文章有講過，其實我們只需要了解物理像素，設備獨立像素，css像素就能解決這個問題。其中物理像素和設備獨立像素我們無法控制，這是人家設備已經設定好的。我們用小米5X舉例，屏幕像素（物理像素）為：1080*1920，設備獨立像素為：360*640，也就是說，一個設備獨立像素就包含3*3個物理像素，同時我們能得出：dpr = 1080*1920 / 360*630 = 3。我們css像素其實就等于一個設備獨立像素，但是我們設計師作圖時，坐標系時1080*1920并不是標準的360*640，這樣我們就需要將設計師的圖/3，得到的就是移動端正確的大小。其實，不管你分辨率有多高，對于普通用戶來講，分辨率，物理像素有多少是最直觀的評價標準。而我們前端工程師，關注的背后設備獨立像素是多少，因為我們布局用的是設備獨立像素而不是物理像素作為參考。所以，屏幕的分辨率是已知的，我們通過js的window.devicePixelRatio知道dpr是多少，這樣就能知道設備獨立像素的規格，從而設置我們的css像素與設備獨立像素一致，這樣我們前端就能根據進行合適的切圖，還原設計稿！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116947.html
摘要：但是，在移動端，看著分辨率高達的，在控制臺中卻只有的分辨率，似乎有點不合邏輯。對于手機，物理像素可以在手機說明書或者官網的參數配置中查到，而設備獨立像素打開控制臺選擇對應機型后就可以看到當然，也可以在控制臺中用上面的命令查看。 最近在做移動端的開發，深入了解了下移動端適配的一些問題，加上自己的理解，記錄下來，寫一個小的系列博客，與大家分享。所有的問題，就開始從像素說起吧~ 像素是一個經...
摘要：設備像素設備分辨率設備像素也叫物理像素。從圖中可以驗證，橫縱方向的設備像素數量恰好是設備獨立像素的倍。像素與設備獨立像素的關系縮放比例就是像素邊長設備獨立像素邊長。因為的寬度沒有改變，無論以什么單位衡量設備像素設備獨立像素還是像素。 這篇文章是我在我的舊博客上發過的文章，最近又碰到這個問題，整理修改了一下發到這里。 像素單位 像素單位有設備像素、邏輯像素和CSS像素3種。 設備像素（d...
摘要：需要注意，上面的尺寸都是屏幕對角線的長度英寸縮寫為在荷蘭語中的本意是大拇指，一英寸就是指甲底部普通人拇指的寬度。由于手機尺寸為手機對角線的長度，我們通常使用如下的方法計算的為，那它每英寸約含有個物理像素點。導讀 移動端適配，是我們在開發中經常會遇到的，這里面可能會遇到非常多的問題： 1px問題 UI圖完美適配方案 iPhoneX適配方案 橫屏適配 高清屏圖片模糊問題 ... ...
閱讀 1848·2021-11-22 15:24
閱讀 1307·2021-11-12 10:36
閱讀 3194·2021-09-28 09:36
閱讀 1836·2021-09-02 15:15
閱讀 2745·2019-08-30 15:54
閱讀 2391·2019-08-30 11:02
閱讀 2391·2019-08-29 13:52
閱讀 3539·2019-08-26 11:53
