[css] ui設計中px、pt、ppi、dpi、dp、sp之間的關系？

QQ20150717160352
做了幾個移動端的項目之后，深感移動端尺寸換算的必要性，在此做個總結。

先介紹下各自的定義：

px：pixel，像素，電子屏幕上組成一幅圖畫或照片的最基本單元
pt: point，點，印刷行業常用單位，等于1/72英寸
ppi: pixel per inch，每英寸像素數，該值越高，則屏幕越細膩
dpi: dot per inch，每英寸多少點，該值越高，則圖片越細膩
dp: dip，Density-independent pixel, 是安卓開發用的長度單位，1dp表示在屏幕像素點密度為160ppi時1px長度
sp: scale-independent pixel，安卓開發用的字體大小單位。
以下是換算關系：

一、pt和px
公式一： 1pt= (DPI / 72) px

當photoshop中新建畫布的分辨率為72ppi( 即 72dpi時 )， 1pt=1px； 當新建畫布分辨率為72*2=144ppi時，1pt=2px

二、ppi和dpi
dpi最初用于衡量打印物上每英寸的點數密度。DPI值越小圖片越不精細。當DPI的概念用在計算機屏幕上時，就應稱之為ppi。同理： PPI就是計算機屏幕上每英寸可以顯示的像素點的數量。因此，在電子屏幕顯示中提到的ppi和dpi是一樣的，可認為

公式二：dpi=ppi

三、ppi計算方法
ppi是指屏幕上的像素密度，其計算方法為：

公式三： ppi= 屏幕對角線上的像素點數/對角線長度 = √ （屏幕橫向像素點^2 + 屏幕縱向像素點^2）/對角線長度

以小米2s為例，該屏幕分辨率為720px*1280px，4.3英寸。則點密度為 √ (720^2 +1280^2) /4.3 = 342ppi。

四、px和dp
dp為安卓開發時的長度單位，根據不同的屏幕分辨率，與px有不同的對應關系。

安卓端屏幕大小各不相同，根據其像素密度，分為以下幾種規格：

QQ20150717160404

1dp定義為屏幕密度值為160ppi時的1px，即，在mdpi時，1dp = 1px。 以mdpi為標準，這些屏幕的密度值比為：ldpi : mdpi : hdpi : xhdpi : xxhdpi = 0.75 : 1 : 1.5 : 2 : 3；即，在xhdpi的密度下，1dp=2px；在hdpi情況下，1dp=1.5px。其他類推。

公式四： 1dp=（屏幕ppi/ 160）px

以WVGA屏為例，該屏幕為480px*800px，按3.8寸屏算，點密度 √ (480^2 + 800^2) / 3.8 = 245，約等于240，對應于hdpi屏幕，所以該屏幕1dp=1.5px

五、dp和sp
dp和sp都是安卓的開發單位，dp是長度單位，sp是字體單位。sp與dp類似，但是可以根據用戶的字體大小首選項進行縮放。Android系統允許用戶自定義文字尺寸大小（小、正常、大、超大等等），

公式五：當文字尺寸是“正常”時1sp=1dp，而當文字尺寸是“大”或“超大”時，1sp>1dp。

一般情況下可認為sp=dp。

總結：由于做設計時以xhdpi為模板，xhdpi條件下，1dp=2px。若新建畫布時，將畫布分辨率設為144ppi，則1pt=2px=1dp。此時，即可將pt等同于dp。標注長度的時候，將長度像素除以2即為dp值。

PS：在photoshop cc中切圖時，可直接在.png 圖片圖層名稱前加上200%獲得2倍大小的圖，其他比例的切圖以此類推。輸出的兩倍圖不模糊的前提是，該圖是photoshop中用形狀工具畫出來的未被柵格化的圖形，而不是已被柵格化的圖層或外部導入的圖片。

android獲取屏幕尺寸、密度
有些時候，我們需要獲取Android手機或Pad的屏幕的物理尺寸，以便于界面的設計或是其他功能的實現。下面就介紹講一講如何獲取屏幕的物理尺寸：
從網上找過不少資料，發現獲取屏幕尺寸并不是很復雜的編程操作，下面的代碼即可獲取屏幕的尺寸。
在一個Activity的onCreate方法中，寫入如下代碼：
DisplayMetrics metric = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metric);
int width = metric.widthPixels; // 屏幕寬度（像素）
int height = metric.heightPixels; // 屏幕高度（像素）
float density = metric.density; // 屏幕密度（0.75 / 1.0 / 1.5）
int densityDpi = metric.densityDpi; // 屏幕密度DPI（120 / 160 / 240）
但是，需要注意的是，在一個低密度的小屏手機上，僅靠上面的代碼是不能獲取正確的尺寸的。比如說，一部240x320像素的低密度手機，如果運行上述代碼，獲取到的屏幕尺寸是320x427。因此，研究之后發現，若沒有設定多分辨率支持的話，Android系統會將240x320的低密度（120）尺寸轉換為中等密度（160）對應的尺寸，這樣的話就大大影響了程序的編碼。所以，需要在工程的AndroidManifest.xml文件中，加入supports-screens節點，具體的內容如下：

這樣的話，當前的Android程序就支持了多種分辨率，那么就可以得到正確的物理尺寸了。

個人簡介

我是歌謠，歡迎和大家一起交流前后端知識。放棄很容易，
但堅持一定很酷。歡迎大家一起討論

主目錄

與歌謠一起通關前端面試題

總結

以上是生活随笔為你收集整理的[css] ui设计中px、pt、ppi、dpi、dp、sp之间的关系？的全部內容，希望文章能夠幫你解決所遇到的問題。

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