# Pixel Units


The framework provides four pixel units, with vp as the reference data unit.


  | Name | Description | 
| -------- | -------- |
| px | Physical pixel unit of the screen. | 
| vp | Pixels specific to the screen density, which are converted into physical pixels of the screen based on the screen pixel density. | 
| fp | Font pixel, which is similar to vp and varies according to the system font size. | 
| lpx | Logical pixel unit of the window. It is the ratio of the actual screen width to the logical width (configured by [designWidth](ts-framework-js-tag.md)). For example, if designWidth is set to 720, then 1lpx is equal to 2px for a screen with an actual width of 1440 physical pixels. | 


## Pixel Unit Conversion

Conversion from other pixel units to px is supported.

  | API | Description | 
| -------- | -------- |
| vp2px(value : number) : number | Converts a value in units of vp to a value in units of px. | 
| px2vp(value : number) : number | Converts a value in units of px to a value in units of vp. | 
| fp2px(value : number) : number | Converts a value in units of fp to a value in units of px. | 
| px2fp(value : number) : number | Converts a value in units of px to a value in units of fp. | 
| lpx2px(value : number) : number | Converts a value in units of lpx to a value in units of px. | 
| px2lpx(value : number) : number | Converts a value in units of px to a value in units of lpx. | 


## Example

  
```
@Entry
@Component
struct Example {
  build() {
    Column() {
      Flex({ wrap: FlexWrap.Wrap }) {
        Column() {
          Text("width(220)")
            .width(220).height(40).backgroundColor(0xF9CF93)
            .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp')
        }.margin(5)
        Column() {
          Text("width('220px')")
            .width('220px').height(40).backgroundColor(0xF9CF93)
            .textAlign(TextAlign.Center).fontColor(Color.White)
        }.margin(5)
        Column() {
          Text("width('220vp')")
            .width('220vp').height(40).backgroundColor(0xF9CF93)
            .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp')
        }.margin(5)
        Column() {
          Text("width('220lpx') designWidth:720")
            .width('220lpx').height(40).backgroundColor(0xF9CF93)
            .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp')
        }.margin(5)
        Column() {
          Text("width(vp2px(220) + 'px')")
            .width(vp2px(220) + 'px').height(40).backgroundColor(0xF9CF93)
            .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp')
        }.margin(5)
        Column() {
          Text("fontSize('12fp')")
            .width(220).height(40).backgroundColor(0xF9CF93)
            .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12fp')
        }.margin(5)
      }.width('100%')
    }
  }
}
```

![en-us_image_0000001267607893](figures/en-us_image_0000001267607893.gif)