1# 像素单位 2 3ArkUI为开发者提供4种像素单位，框架采用vp为基准数据单位。 4 5>**说明：** 6> 7>本模块首批接口从API version 7开始支持，后续版本的新增接口，采用上角标单独标记接口的起始版本。 8 9 10| 名称 | 描述 | 11| ---- | ------------------------------------------------------------ | 12| px | 屏幕物理像素单位。 | 13| vp | 屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素，当数值不带单位时，默认单位vp。在实际宽度为1440物理像素的屏幕上，1vp约等于3px。 | 14| fp | 字体像素，与vp类似适用屏幕密度变化，随系统字体大小设置变化。 | 15| lpx | 视窗逻辑像素单位，lpx单位为实际屏幕宽度与逻辑宽度（通过[designWidth](../../quick-start/module-configuration-file.md#pages标签)配置）的比值，designWidth默认值为720。当designWidth为720时，在实际宽度为1440物理像素的屏幕上，1lpx为2px大小。 | 16 17 18## 像素单位转换 19 20提供其他单位与px单位互相转换的方法。 21 22| 接口 | 描述 | 23| ---------------------------------------- | ---------------------------------------- | 24| vp2px(value : number) : number | 将vp单位的数值转换为以px为单位的数值。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/> **说明：** <br/> 默认使用当前UI实例所在屏幕的虚拟像素比进行转换，UI实例未创建时，使用虚拟像素比1：1进行转换。 | 25| px2vp(value : number) : number | 将px单位的数值转换为以vp为单位的数值。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/> **说明：** <br/> 默认使用当前UI实例所在屏幕的虚拟像素比进行转换，UI实例未创建时，使用虚拟像素比1：1进行转换。 | 26| fp2px(value : number) : number | 将fp单位的数值转换为以px为单位的数值。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 27| px2fp(value : number) : number | 将px单位的数值转换为以fp为单位的数值。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 28| lpx2px(value : number) : number | 将lpx单位的数值转换为以px为单位的数值。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 29| px2lpx(value : number) : number | 将px单位的数值转换为以lpx为单位的数值。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 30 31 32## 示例 33 34```ts 35// xxx.ets 36@Entry 37@Component 38struct Example { 39 build() { 40 Column() { 41 Flex({ wrap: FlexWrap.Wrap }) { 42 Column() { 43 Text("width(220)") 44 .width(220) 45 .height(40) 46 .backgroundColor(0xF9CF93) 47 .textAlign(TextAlign.Center) 48 .fontColor(Color.White) 49 .fontSize('12vp') 50 }.margin(5) 51 52 Column() { 53 Text("width('220px')") 54 .width('220px') 55 .height(40) 56 .backgroundColor(0xF9CF93) 57 .textAlign(TextAlign.Center) 58 .fontColor(Color.White) 59 }.margin(5) 60 61 Column() { 62 Text("width('220vp')") 63 .width('220vp') 64 .height(40) 65 .backgroundColor(0xF9CF93) 66 .textAlign(TextAlign.Center) 67 .fontColor(Color.White) 68 .fontSize('12vp') 69 }.margin(5) 70 71 Column() { 72 Text("width('220lpx') designWidth:720") 73 .width('220lpx') 74 .height(40) 75 .backgroundColor(0xF9CF93) 76 .textAlign(TextAlign.Center) 77 .fontColor(Color.White) 78 .fontSize('12vp') 79 }.margin(5) 80 81 Column() { 82 Text("width(vp2px(220) + 'px')") 83 .width(vp2px(220) + 'px') 84 .height(40) 85 .backgroundColor(0xF9CF93) 86 .textAlign(TextAlign.Center) 87 .fontColor(Color.White) 88 .fontSize('12vp') 89 }.margin(5) 90 91 Column() { 92 Text("fontSize('12fp')") 93 .width(220) 94 .height(40) 95 .backgroundColor(0xF9CF93) 96 .textAlign(TextAlign.Center) 97 .fontColor(Color.White) 98 .fontSize('12fp') 99 }.margin(5) 100 101 Column() { 102 Text("width(px2vp(220))") 103 .width(px2vp(220)) 104 .height(40) 105 .backgroundColor(0xF9CF93) 106 .textAlign(TextAlign.Center) 107 .fontColor(Color.White) 108 .fontSize('12fp') 109 }.margin(5) 110 }.width('100%') 111 } 112 } 113} 114``` 115 116 117
