问题(带着问题学知识)
- 设计师设计的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
网友评论