問題(帶著問題學知識)

設計師設計的UI設計圖采用的是PX，而reactnative默認采用的dp，如何進行轉換

設備屏幕大小一樣，但是分辨率不同，如何保證展示效果一致性

分辨率相同，設備屏幕大小不同，怎么處理？

基礎知識

區分物理寬度和相對寬度。
－ 物理寬度是可測量的。比如說：手機設備的寬度4英寸

－ 相對長度（像素寬度）是相對物理寬度而存在的。比如說：1英寸的顯示屏里面可以只有1個像素長度，也可以有100像素長度。這個可以結合window電腦的分辨率來理解，在物理設備（即屏幕）大小不變的情況，調整桌面分辨率，可以改變展示的像素點。1024768分辨率，即有：1024768＝786432個像素點。

各種長度單位理解

• PPI（DPI）大多數情況下這兩種是相等的，即PPI ＝ DPI。PPI是屏幕像素與設備的比值：PPI＝屏幕對角線像素點／屏幕對角線物理寬度。通過這個密度單位可以解決我們之前提出的問題（見最后的示例）。

• PPI (pixels per inch) 圖像分辨率 （每英寸所包含的像素數）

• DPI（dots per inch）打印精度 （每英寸所能打印的點數）

• dp（dip）（Density-independent pixels）一種基于屏幕密度的抽象單位。在每英寸160點的顯示器上，1dp = 1px。特別需要注意dp是相對長度單位，簡單的說1dp在不同的屏幕或者不同的ppi下展示出來的“物理長度”可能不一致。

• px 像素點。也是相對長度

• in（inch）英寸。物理長度

• pt 中文叫磅，等于1/72英寸。物理長度

• sp（與刻度無關的像素）：與dp類似，但是可以根據用戶的字體大小首選項進行縮放，adroid設置字體的時候使用。

• density 密度。density ≈ 設備PPI/160PPI。比如我是320PPI設備，density＝320PPI/160PPI=2;density是一個int類型的值，比如說我的設備是326PPI(iPhone6的ppi)，density也是等于2；在比如401PPI(iPhone6 Plus的ppi)density等于3；401-320=81 , 480 - 401=79 因此79跟加接近，所以density等于480PPI的density值。
  react-native 官網針對這個的說明

長度單位換算公式

• 160PPI下：

  • 1dp = 1px = 1dip

  • 1pt = 1/72in

  • 1pt = 160/72 sp
    推導過程
    160 PPI ＝ 160px／1in ＝ 160dp／1in
    1pt ＝ 1/72in ＝> 1in = 72pt
    1pt = 160dp/72

  • 1px = dp * (density / 160)

• 不同PPI的dp與px的換算關系

  • 160PPI(mdpi) : 1dp = 1px

  • 240PPI(hdpi) : 1dp = 1.5px

  • 320PPI(xhdpi) : 1dp = 2px

    • iPhone 4, 4S ; iPhone 5, 5c, 5s ; iPhone 6都是這個ppi

  • 480PPI(xxhdpi) : 1dp = 3px

UI設計到android布局示例

=======================================
UI設計原型：基于iphone6
分辨率：1334 x 750 px；
屏幕大小：4.7英寸
DPI 326dpi（約等于320dpi，density=2;1dp＝(1*density)px）
全屏dp值：667 x 375 dp ((1334/density) x (750/density) )

=======================================

• 假設UI設計師頂部導航了100px，這時候轉換成dp就是：100px/2=50dp

總結

以上是生活随笔為你收集整理的react-native 单位换算(px,pt,dp,ppi)的全部內容，希望文章能夠幫你解決所遇到的問題。

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