CSS布局基礎之一設備像素,設備獨立像素,設備像素比,css像素之間的關系


設備像素dp(device pixels)

ppi(pixels per inch)表示每英寸所擁有的像素(pixel)數目,數值越高,代表屏幕能以更高的密度顯示圖像。
計算公式:ppi=像素數量/物理尺寸(英寸數)
ppi就是設備像素dp(device pixels)的單位。
PPI計算公式
舉例:
一個3.5寸的分辨率為320*480的屏幕a,ppi是(根號(320^2 + 480^2)) / 3.5 = 164,約等於160。
一個3.8寸的分辨率為480*800的屏幕b,ppi是(根號(480^2 + 800^2)) / 3.8 = 245,約等於240。
一個4.3寸的分辨率為480*800的屏幕c,ppi是(根號(480^2 + 800^2)) / 4.3 = 217,約等於210。
一個4.3寸的分辨率為720*1280的屏幕d,ppi是(根號(720^2 + 1280^2)) / 4.3 = 342,約等於340。
一個5.5寸的分辨率為720*1280的屏幕e,ppi是(根號(720^2 + 1280^2)) / 5.5 = 267,約等於260。
一只筆的像素如下:
筆
這只筆在屏幕c,d,e下的顯示效果如下:
筆

設備獨立像素dips(device-independent pixels)

可看到同一張圖片在各屏幕顯示大小不一。
我們希望不同屏幕顯示圖片的大小要一致。
我們要計算圖片縮放比例。
計算公式:
圖片邏輯像素大小px1 / 圖片縮放后實際像素大小px2 = 設備像素dp / 設備獨立像素dips
px2 = px1 * (dp / dips)
px2 = px1 * dpr
此時,這只筆在屏幕c,d,e下的顯示效果如下:
筆

設備像素比dpr(devicePixelRatio)

devicePixelRatio是設備像素dp和設備獨立像素dips的比例,
也就是dpr = dp / dips

css像素

css像素是一個相對單位。
相對不同屏幕,其實際像素大小不同。
我們定義時,是定義其邏輯像素。即該圖要用多少個像素來顯示。

擴展閱讀

WebKit中的亞像素對齊機制
https://trac.webkit.org/wiki/LayoutUnit

相關引用:

  1. DPI、PPI、DP、PX 的詳細計算方法及算法來源是什么?
    http://www.zhihu.com/question/21220154
  2. 前端工程師需要明白的「像素」
    http://www.jianshu.com/p/af6dad66e49a


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM