有個朋友突然問我說：“物理像素”是什么？“邏輯像素”又是什么？他們之間有什么關(guān)系？那么關(guān)于移動端的物理像素和邏輯像素是什么東西，這兩個究竟有什么關(guān)系呢？我們來了解一下。

一：物理像素

一個設(shè)備的像素，如果在同一個設(shè)備上，它的物理像素是固定的，當(dāng)然這是廠商在出廠時就設(shè)置好的，也就是說一個設(shè)備的分辨率是固定的。

物理分辨率：顯示屏的最佳分辨率，即屏幕實際存在的像素行數(shù)乘以列數(shù)的數(shù)學(xué)表達(dá)方式，是顯示屏固有的參數(shù)，不能調(diào)節(jié)，其含義是指顯示屏最高可顯示的像素數(shù)。

二：邏輯像素

CSS像素，（層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個子集）等文件樣式的計算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。）

viewport（谷歌翻譯為：視）中的一個小方格，CSS樣式代碼中使用的是邏輯像素。如果在一個設(shè)備中，物理像素與邏輯像素相等，將不會產(chǎn)生任何問題。但是，在iphone 4中，物理像素是640px*960px，而邏輯像素數(shù)為320*480px。因此，需要使用大約4個物理像素來顯示一個CSS像素。

也就是說我們經(jīng)常說的工程師尺寸就是邏輯像素，設(shè)計師尺寸就是物理像素。

三：像素比

物理像素與邏輯像素之間的比例。當(dāng)像素比為1:1時，使用1個物理像素顯示1個邏輯像素；當(dāng)像素比為2:1時，使用4個物理像素顯示1個邏輯像素。

四：CSS中的1px并不等于設(shè)備的1px

在CSS中一般使用px作為單位，（這個我們平時寫代碼的時候就在用，各位應(yīng)該很熟悉了）在Web瀏覽器中CSS的1個像素往往都是對應(yīng)著電腦屏幕的1個物理像素，這可能會造成一個錯覺，那就是CSS中的像素就是設(shè)備的物理像素。但實際情況卻并非如此，CSS中的像素只是一個抽象的單位，在不同的設(shè)備或不同的環(huán)境中，CSS中的1px所代表的設(shè)備物理像素是不同的。

在早先的移動設(shè)備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320*480，在iphone3上，1個CSS像素確實是等于1個物理像素的。后來隨著技術(shù)的發(fā)展，移動設(shè)備的像素越來越高，從iphone4開始，推出了所謂的Retina屏，分辨率提高了一倍，變成640*960，但屏幕尺寸卻沒變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時，1個CSS像素是等于4個物理像素的。

五：實現(xiàn)真正的1物理像素

當(dāng)viewport（谷歌翻譯為：視）的屬性initial-scale（谷歌翻譯為：初始規(guī)模）為1時，頁面大小正常，但initial-scale（谷歌翻譯為：初始規(guī)模）為0.5時，頁面被縮小了1倍，像素比為2:1的設(shè)備本來1個CSS像素寬度占2個物理像素寬度，縮小后的1個CSS像素寬度就只占1個物理像素，即實現(xiàn)了真正的1物理像素。

eg：border-width:1px并不是最小邊框，瀏覽器可以顯示的最小粒度比1px還要小。為什么會出現(xiàn)比border-width:1px更細(xì)的邊框？

屏幕能夠顯示的最小粒度是1個物理像素，iPhone4的像素比為2，設(shè)置border-width:1px后，邊框占了4個物理像素，如果能讓邊框的寬度為1物理像素，那么它就比1個CSS像素要細(xì)，這可以通過設(shè)置<meta name="viewport" content="width=device-width, initial-scale=0.5">。

文章內(nèi)容來自網(wǎng)絡(luò)，版權(quán)歸原作者所有，如有侵權(quán)請聯(lián)系管理員刪除。