1# 像素单位 2 3为开发者提供4种像素单位，框架采用vp为基准数据单位。 4 5 6| 名称 | 描述 | 7| ---- | ---------------------------------------- | 8| px | 屏幕物理像素单位。 | 9| vp | 屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素，当数值不带单位时，默认单位vp。 | 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).height(40).backgroundColor(0xF9CF93) 41 .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') 42 }.margin(5) 43 Column() { 44 Text("width('220px')") 45 .width('220px').height(40).backgroundColor(0xF9CF93) 46 .textAlign(TextAlign.Center).fontColor(Color.White) 47 }.margin(5) 48 Column() { 49 Text("width('220vp')") 50 .width('220vp').height(40).backgroundColor(0xF9CF93) 51 .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') 52 }.margin(5) 53 Column() { 54 Text("width('220lpx') designWidth:720") 55 .width('220lpx').height(40).backgroundColor(0xF9CF93) 56 .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') 57 }.margin(5) 58 Column() { 59 Text("width(vp2px(220) + 'px')") 60 .width(vp2px(220) + 'px').height(40).backgroundColor(0xF9CF93) 61 .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') 62 }.margin(5) 63 Column() { 64 Text("fontSize('12fp')") 65 .width(220).height(40).backgroundColor(0xF9CF93) 66 .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12fp') 67 }.margin(5) 68 }.width('100%') 69 } 70 } 71} 72``` 73 74 75
