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