react-native 单位换算(px,pt,dp,ppi)

问题(带着问题学知识)

  1. 设计师设计的UI设计图采用的是PX,而reactnative认采用的dp,如何进行转换

  2. 设备屏幕大小一样,但是分辨率不同,如何保证展示效果一致性

  3. 分辨率相同,设备屏幕大小不同,怎么处理?

基础知识

  1. 区分物理宽度和相对宽度。
    - 物理宽度是可测量的。比如说:手机设备的宽度4英寸

- 相对长度(像素宽度)是相对物理宽度而存在的。比如说:1英寸的显示屏里面可以只有1个像素长度,也可以有100像素长度。这个可以结合window电脑的分辨率来理解,在物理设备(即屏幕)大小不变的情况,调整桌面分辨率,可以改变展示的像素点。1024768分辨率,即有:1024768=786432个像素点。

  1. 各种长度单位理解

    • 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 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...