问题(带着问题学知识)
设计师设计的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/721px = 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