1# 像素单位 2 3ArkUI为开发者提供4种像素单位，采用vp为基准数据单位。 4 5>**说明：** 6> 7>本模块首批接口从API version 7开始支持，后续版本的新增接口，采用上角标单独标记接口的起始版本。 8 9 10| 名称 | 描述 | 11| ---- | ------------------------------------------------------------ | 12| px | 屏幕物理像素单位。 | 13| vp | 屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素，当数值不带单位时，默认单位vp。<br/> **说明：** <br/>vp与px的比例与屏幕像素密度有关。 | 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**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 23 24**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 25 26**系统能力：** SystemCapability.ArkUI.ArkUI.Full 27 28| 接口 | 描述 | 29| --------------------------------------------------- | ------------------------------------------------------------ | 30| vp2px(value : number) : number | 将vp单位的数值转换为以px为单位的数值。<br/> **说明：** <br/> 默认使用当前UI实例所在屏幕的虚拟像素比进行转换，UI实例未创建时，使用默认屏幕的虚拟像素比进行转换。 | 31| px2vp(value : number) : number | 将px单位的数值转换为以vp为单位的数值。<br/> **说明：** <br/> 默认使用当前UI实例所在屏幕的虚拟像素比进行转换，UI实例未创建时，使用默认屏幕的虚拟像素比进行转换。 | 32| fp2px(value : number) : number | 将fp单位的数值转换为以px为单位的数值。 | 33| px2fp(value : number) : number | 将px单位的数值转换为以fp为单位的数值。 | 34| lpx2px(value : number) : number | 将lpx单位的数值转换为以px为单位的数值。 | 35| px2lpx(value : number) : number | 将px单位的数值转换为以lpx为单位的数值。 | 36 37 38## 示例 39 40> **说明：** 41> 42> 直接使用vp2px/px2vp/fp2px/px2fp/lpx2px/px2lpx可能存在UI上下文不明确的问题，建议使用[getUIContext](../js-apis-arkui-UIContext.md#uicontext)获取UIContext实例，再使用UIContext下的[vp2px/px2vp/fp2px/px2fp/lpx2px/px2lpx](../js-apis-arkui-UIContext.md#vp2px12)调用绑定实例的接口。 43 44```ts 45// xxx.ets 46@Entry 47@Component 48struct Example { 49 build() { 50 Column() { 51 Flex({ wrap: FlexWrap.Wrap }) { 52 Column() { 53 Text("width(220)") 54 .width(220) 55 .height(40) 56 .backgroundColor(0xF9CF93) 57 .textAlign(TextAlign.Center) 58 .fontColor(Color.White) 59 .fontSize('12vp') 60 }.margin(5) 61 62 Column() { 63 Text("width('220px')") 64 .width('220px') 65 .height(40) 66 .backgroundColor(0xF9CF93) 67 .textAlign(TextAlign.Center) 68 .fontColor(Color.White) 69 }.margin(5) 70 71 Column() { 72 Text("width('220vp')") 73 .width('220vp') 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('220lpx') designWidth:720") 83 .width('220lpx') 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("width(vp2px(220) + 'px')") 93 // 建议使用this.getUIContext().vp2px() 94 .width(vp2px(220) + 'px') 95 .height(40) 96 .backgroundColor(0xF9CF93) 97 .textAlign(TextAlign.Center) 98 .fontColor(Color.White) 99 .fontSize('12vp') 100 }.margin(5) 101 102 Column() { 103 Text("fontSize('12fp')") 104 .width(220) 105 .height(40) 106 .backgroundColor(0xF9CF93) 107 .textAlign(TextAlign.Center) 108 .fontColor(Color.White) 109 .fontSize('12fp') 110 }.margin(5) 111 112 Column() { 113 Text("width(px2vp(220))") 114 // 建议使用this.getUIContext().px2vp() 115 .width(px2vp(220)) 116 .height(40) 117 .backgroundColor(0xF9CF93) 118 .textAlign(TextAlign.Center) 119 .fontColor(Color.White) 120 .fontSize('12fp') 121 }.margin(5) 122 }.width('100%') 123 } 124 } 125} 126``` 127 128 129
