掌握web開發基礎系列--物理像素、邏輯像素、css像素

思考一下

什麼是物理像素？什麼是css像素？

在 《掌握web開發基礎系列--長度單位》 這篇文章中已經介紹過了css像素單位--px，這篇文章詳細探討一下設備物理像素和css像素之間的關係。

「像素」，是一個名詞，在不一樣的上下文中所描述的東西可能不同，可是也可能存在必定關係。

兩種像素

注：下面不少是直接引用參考文章中的描述，主要緣由是原文寫的很棒，爲做者點贊！

物理像素

設備屏幕實際擁有的像素點，屏幕的基本單元，是有實體的。好比iPhone 6的屏幕在寬度方向有750個像素點，高度方向有1334個像素點，全部iPhone 6 總共有750*1334個像素點。

屏幕廣泛採用RGB色域(紅、綠、藍三個子像素構成),而印刷行業廣泛使用CMYK色域(青、品紅、黃和黑)。

邏輯像素

也叫「設備獨立像素」（Device Independent Pixel，DIP），能夠理解爲反映在CSS/JS程序裏面的像素點，也就是說css像素是邏輯像素的一種。

除了css像素是邏輯像素還有其餘常見的邏輯像素嗎？

咱們平時描述一張圖片寬高時通常用 200px * 100px，這裏的px也是邏輯像素。

設備像素比（Device Pixel Ratio，DPR）

一個設備的物理像素與邏輯像素之比。

像素爲何會有「物理」和「邏輯」之分，它們之間什麼區別？

其實在好久之前，的確是沒區別的，CSS裏寫個1px，屏幕就給你渲染成1個實際的像素點，DPR=1，多麼簡單天然~

後來蘋果公司爲其產品mac、iPhone以及iPad的屏幕配置了Retina高清屏，也就是說這種屏幕擁有的物理像素點數比非高清屏多4倍甚至更多。若是還按照DPR=1進行展現，那麼同一張圖片在高清屏上面顯示的區域面積會是非高清屏的1/4，這樣的話因爲圖片在屏幕上的展現面積大大縮小，也會致使出現「看不清」的問題。

蘋果公司既然推出了Retina技術，那麼這種技術帶來了高清展現福利的前提下也要解決「DPR=1」的問題。怎麼解決呢？DPR!=1。蘋果公司通過一系列技術使用4個乃至更多物理像素來渲染1個邏輯像素，這樣一來，一樣的CSS代碼設置的尺寸，在Retina和非Retina屏幕上看起來大小是同樣的，但在Retina屏幕上要精細得多。更多內容請閱讀《Retina （一種新型高分辨率的顯示標準）》

在Retian屏上，DPR再也不是1，而是大於1，好比2（iPhone 5 6 7 8）或3（iPhone 6 Plus等一系列Plus）或者爲非整數（一些Android機），說不定還會漲。

舉個例子，iPhone 6的物理像素上面已經說了，是750 * 1334，那它的邏輯像素呢？咱們只需在iPhone 6的Safari裏打印一下screen.width和screen.height就知道了，結果是 375 * 667，這就是它的邏輯像素，據此很容易計算出DRP爲2。固然，咱們還能夠直接經過window.devicePixelRatio這個值來獲取DRP，打印結果是2，符合咱們的預期。

奇葩的iPhone 6 Plus

這裏不得不提一下iPhone 6 Plus（以及同尺寸的其餘果機），它的實際物理像素點個數是1080 * 1920，但若是你截個屏，你會發現截屏圖片的寬高是1242 * 2208；瀏覽器的screen對象會告訴你，6 Plus的邏輯像素是414 * 736，正好是截屏寬度的三分之一，window.devicePixelRatio值也爲3。

因此如今咱們有了3種不一樣的像素值？什麼狀況？

是這樣的，iPhone 6 Plus系統定義的屏幕像素就是1242 * 2208，系統會自動把這些像素點塞進1080 * 1920個實際像素點來渲染，這個過程對於開發者是透明的，無需理會。

因此對於前端來講，能夠直接把1242視爲6 Plus的「物理像素」，包括UI小姐姐們出圖也是以1242爲標準的，所以不妨把1242 * 2208稱爲6 Plus的「設計像素」。

蘋果這是要鬧那樣？

其實，當初蘋果公司在肯定6 Plus的DRP時，糾結了半天：選2吧，一樣的字號在6 Plus上看起來比6更小，很差；選3吧，字又顯得太大了，致使一屏能展現的內容尚未6多；最適合視覺的DRP值是2.46，但這樣一個數字能把設計師和程序員們逼瘋。最後就想出了引入「設計像素」這樣一個一箭雙鵰的方案，既讓開發者開心，又讓用戶爽，豈不美哉？

1px邊框問題

在蘋果的帶動下，Retina技術在移動設備上已經成了標配，因此前端攻城獅必須直面以下事實：

1. 你想畫個1px的下邊框，但屏幕硬是塞給你一條寬度爲2—3個物理像素的線。
2. 你無法像安卓或iOS的同事那樣直接操縱物理像素點。
複製代碼

這就是初級前端面試必考題之「1px邊框問題」的由來。

1px邊框問題的解法千奇百怪，各顯神通，但以個人實踐經驗，最推崇的方法仍是利用CSS3的transform: scale，由於簡單直接、適用性和兼容性好。

你不是給我兩個物理像素點嗎？加個transform: scale(0.5)，只剩一個點了~

三個物理像素點？那就scale(0.33)！

使用CSS的-webkit-min-device-pixel-ratio媒體查詢能夠針對不一樣的DPR作出處理 ，下面以Less代碼爲例：

@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
    .border-bt-1px(@color) {
        position: relative;
        &::after {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 1px;
            background-color: @color;
            transform: scaleY(0.5);
        }
    }
}
複製代碼

上面介紹的是隻有一邊的情景，若是是四面都要有框，咋辦？

那就畫個DPR倍大小的矩形框，再scale一下，完事~

再次感謝原文做者！

總結

1個邏輯像素等於1個物理像素仍是等於多個物理像素是由設備自己決定的，咱們能夠經過DPR也就是window.devicePixelRatio獲知，至於設備怎麼作的控制和轉換咱們不去作深究。

參考文章

CSS中的px與物理像素、邏輯像素、1px邊框問題