# 提問

物理像素、邏輯像素、CSS像素、PPI、設備像素比是什么？

# 回答

• 物理像素代表屏幕上有多少個點，比如1080x2340表示屏幕一排包含1080個物理像素點。
• 邏輯像素表示屏幕展示物體的視覺尺寸是多少。邏輯像素相同表示物體看起來或者打印出來大小一樣，物理像素點越小，一個邏輯像素包含點物理像素點就越多，看起來就越清晰。
• 一般情況下CSS像素等同于邏輯像素，但瀏覽器可以放大，手機也有放大模式，此時就不再相等。
• PPI是屏幕對角線的物理像素的個數(shù)除以對角線英寸數(shù)。
• 設備像素比是在水平或者垂直方向，在同一排一個邏輯像素能放幾個物理像素。

# 解析

物理像素

也稱為設備像素，屏幕的最小物理單位。需要注意的是一個像素并不一定是一個小正方形區(qū)塊，也沒有標準的寬高，只是用于顯示豐富色彩的一個“點”而已。可以參考公園里的景觀變色彩燈，一個彩燈(物理像素)由紅、藍、綠小燈組成，三盞小燈不同的亮度混合出各種色彩。比如當我們打開Iphone12的官網，產品參數(shù)里“2340 x 1080 像素分辨率”指的就是設備像素，表示屏幕水平有1080個點，垂直有2340個點。

背景故事：關注手機配置的同學會聽到華為P40排列用的是“周冬雨排列”（上圖右上角），顯示效果沒有三星屏的排列好。之所以國產屏用這種奇怪的排列方式，是因為起步晚其他排列早被其他廠商申請了專利。

邏輯像素

也稱作設備獨立像素。比如我們偶爾會說“電腦屏幕在 2560x1600分辨率下字太小了，我們把它調為 1440x900”，這里的“分辨率”（非嚴謹說法）指的就是設備獨立像素。可以通過 window.screen.width/ window.screen.height 查看。另外，平時我們所說的 iphone12mini的邏輯像素是375 x 812，iPhone12 Pro Max的的邏輯像素是400 x 880。

一個設備獨立像素里可能包含1個或者多個物理像素點，包含的越多則屏幕看起來越清晰。

僅需要物理像素難道不夠嗎？為什么要有邏輯像素呢？因為物理像素僅代表像素點的個數(shù)，并沒有有規(guī)定一個點實際的尺寸是多少。假設有一個按鈕，寬度用100個物理像素表示，因屏幕物理像素排列方式和密度的差異，不同屏幕上實際的視覺寬度必然不一樣。而邏輯像素相同就表示希望按鈕在不同屏幕上看起來一樣大。

PPI (pix per inch)

每英寸的物理像素數(shù)。以尺寸為5.4英寸（屏幕對角線長度）、分辨率為1080 x 2340的iPhone12 mini為例， ppi = Math.sqrt(1080*1080 + 2340*2340) / 5.4 ，值為 476PPI。

CSS像素

瀏覽器使用的單位，用來精確度量網頁上的內容，比如 div { width: 100px; }。在一般情況下（頁面縮放比為1），1個CSS像素 等于 1個設備獨立像素。比如，假設把屏幕獨立像素分辨率設置為1440x900，給頁面元素設置為寬度720px，則視覺上元素的寬度是屏幕寬度的一半。這也解釋了為什么當我們把獨立像素分辨率調高后網頁的文字感覺變小了。當頁面縮放比不為1時，CSS像素和設備獨立像素不再對應。比如當頁面放大200%，則1個CSS像素等于4個設備獨立像素。

設備像素比

設備像素比(DevicePixelRatio)指的是設備物理像素和邏輯像素（device-independent pixels, dips）的比例 。比如iPhone12 mini的DPR是3。

作者 @饑人谷若愚

「前端劍指offer第1期」CSS選擇器優(yōu)先級是怎樣計算的？

「前端劍指offer第2期」一側定寬、一側自適應，盡量多的方案實現(xiàn)？

總結

以上是生活随笔為你收集整理的8cm等于多少像素_「前端剑指offer第5期」物理像素、逻辑像素、CSS像素、PPI、设备像素比是什么...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。