1# Pixel Units
2
3ArkUI provides four pixel units, with vp as the reference data unit.
4
5>**NOTE**
6>
7>The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
8
9
10| Name| Description                                                        |
11| ---- | ------------------------------------------------------------ |
12| px   | Physical pixel unit of the screen.                                          |
13| vp   | Pixel unit specific to the screen density. Pixels in this unit are converted into physical pixels of the screen based on the screen pixel density. This unit is used for values whose unit is not specified.<br> **NOTE**<br>The ratio of vp to px is subject to the screen pixel density.|
14| fp   | Font pixel, which is similar to vp and varies according to the system font size.|
15| lpx  | Logical pixel unit of the window. It is the ratio of the actual screen width to the logical width (configured by [designWidth](../../../quick-start/module-configuration-file.md#pages)). For example, if **designWidth** is set to **720** (default value), then 1 lpx is equal to 2 px for a screen with an actual width of 1440 physical pixels.|
16
17
18## Pixel Unit Conversion
19
20Conversion between px and other pixel units is supported.
21
22**Widget capability**: This API can be used in ArkTS widgets since API version 9.
23
24**Atomic service API**: This API can be used in atomic services since API version 11.
25
26**System capability**: SystemCapability.ArkUI.ArkUI.Full
27
28| API                                               | Description                                                        |
29| --------------------------------------------------- | ------------------------------------------------------------ |
30| vp2px(value : number) : number  | Converts a value in units of vp to a value in units of px.<br> **NOTE**<br> By default, the virtual pixel ratio of the screen where the current UI instance is located is used for conversion. If no UI instance is available, the virtual pixel ratio of the default screen is used instead.|
31| px2vp(value : number) : number  | Converts a value in units of px to a value in units of vp.<br> **NOTE**<br> By default, the virtual pixel ratio of the screen where the current UI instance is located is used for conversion. If no UI instance is available, the virtual pixel ratio of the default screen is used instead.|
32| fp2px(value : number) : number  | Converts a value in units of fp to a value in units of px.                      |
33| px2fp(value : number) : number  | Converts a value in units of px to a value in units of fp.                      |
34| lpx2px(value : number) : number | Converts a value in units of lpx to a value in units of px.                     |
35| px2lpx(value : number) : number | Converts a value in units of px to a value in units of lpx.                     |
36
37
38## Example
39
40> **NOTE**
41>
42> When performing pixel unit conversions, directly calling the **vp2px**, **px2vp**, **fp2px**, **px2fp**, **lpx2px**, or **px2lpx** API may result in ambiguity regarding which UI instance it is tied to. To avoid this issue, obtain a **UIContext** instance using the [getUIContext](../js-apis-arkui-UIContext.md#uicontext) API, and then call the pixel unit conversion API under the specific **UIContext** instance.
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            // You are advised to use 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            // You are advised to use 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![en-us_image_0000001169582302](figures/en-us_image_0000001169582302.png)
129