UI开发中vp和px的区别

对px和vp有点懵，如果有理解比较清楚的，欢迎评论。以下内容是参考部分文档后的自我理解。

 

px是实际的，也就是说实际像素是多少就是多少，vp是虚拟的，不以实际像素为准，只以设定值为准。

比如，一个屏幕是1080*1920的，那实际px就是1080*1920，但某一天，设备的虚拟尺寸信息被设置为600*800了，那vp值就无视实际像素，就按照600*800的虚拟值进行尺寸设定。

就相当于，在当前屏幕上自行设定了一个更密集或者更松散的网格，我直接把文字和图片显示在了网格上，而无视底部的实际尺寸信息

 

先说转换方式，vp的设计稿是有一个尺寸标注的，可以理解为是300vp(width)*800vp(height)的模型机

如果要对不同设备进行适配，需要使用到设备的像素信息以及鸿蒙提供的转换方式——px2vp（px to vp）和vp2px（vp to px）

转换时先获取像素值px，如设备宽度width，则计算屏幕vp值为px2vp(width)

使用获取的vp值/360获取到比例值——px2vp(width)/360

最后按实际资源的尺寸*比例值，获取到在新设备中显示的宽高信息（此处我理解获取到的是在新设备中的px值）

 

vp

vp是HarmonyOS中的UI开发尺寸标的，是虚拟像素（virtual pixel），这个是一个物理像素信息，1vp=1物理像素。

以下为官方图片，在不同像素的屏幕中，图片宽高占比一致。

 

px

px是网页开发中经常使用的一个像素单位，比如电脑屏幕是1920*1080，那么对应的px也是1920*1080。

 

vp更多像是为了支持智能化和程序在设备间自由流转开发出来的，程序在不同设备之间流转，按照固定数值，直接进行页面内容转移而不用额外进行尺寸方面的修改和操作。

px进行程序流转的话，则需要根据新设备的尺寸进行对应的等比例压缩或者扩展。

所以，在程序开发，设备间程序流转的情况下，vp比px有很大的优势，vp设置好宽高比例，就可以在不同像素的设置之间通用。

fp

HarmonyOS中，vp和fp（字体大小）之间也是1：1的关系，如果要对字体大小进行修改，则对比标准也是vp，比如正常字体大小是1vp，变为两倍fp，则对应vp就为2vp，宽高进行等比扩大，但1vp的值是不会变的。