# 提問(wèn)

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

# 回答

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

# 解析

物理像素

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

背景故事：關(guān)注手機(jī)配置的同學(xué)會(huì)聽(tīng)到華為P40排列用的是“周冬雨排列”（上圖右上角），顯示效果沒(méi)有三星屏的排列好。之所以國(guó)產(chǎn)屏用這種奇怪的排列方式，是因?yàn)槠鸩酵砥渌帕性绫黄渌麖S商申請(qǐng)了專(zhuān)利。

邏輯像素

也稱作設(shè)備獨(dú)立像素。比如我們偶爾會(huì)說(shuō)“電腦屏幕在 2560x1600分辨率下字太小了，我們把它調(diào)為 1440x900”，這里的“分辨率”（非嚴(yán)謹(jǐn)說(shuō)法）指的就是設(shè)備獨(dú)立像素。可以通過(guò) window.screen.width/ window.screen.height 查看。另外，平時(shí)我們所說(shuō)的 iphone12mini的邏輯像素是375 x 812，iPhone12 Pro Max的的邏輯像素是400 x 880。

一個(gè)設(shè)備獨(dú)立像素里可能包含1個(gè)或者多個(gè)物理像素點(diǎn)，包含的越多則屏幕看起來(lái)越清晰。

僅需要物理像素難道不夠嗎？為什么要有邏輯像素呢？因?yàn)槲锢硐袼貎H代表像素點(diǎn)的個(gè)數(shù)，并沒(méi)有有規(guī)定一個(gè)點(diǎn)實(shí)際的尺寸是多少。假設(shè)有一個(gè)按鈕，寬度用100個(gè)物理像素表示，因屏幕物理像素排列方式和密度的差異，不同屏幕上實(shí)際的視覺(jué)寬度必然不一樣。而邏輯像素相同就表示希望按鈕在不同屏幕上看起來(lái)一樣大。

PPI (pix per inch)

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

CSS像素

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

設(shè)備像素比

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

作者 @饑人谷若愚

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

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。