1# Pixel Units 2 3 4The framework provides four pixel units, with vp as the reference data unit. 5 6 7 | Name | Description | 8| -------- | -------- | 9| px | Physical pixel unit of the screen. | 10| vp | Pixels specific to the screen density, which are converted into physical pixels of the screen based on the screen pixel density. | 11| fp | Font pixel, which is similar to vp and varies according to the system font size. | 12| 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. | 13 14 15## Pixel Unit Conversion 16 17Conversion from other pixel units to px is supported. 18 19 | API | Description | 20| -------- | -------- | 21| vp2px(value : number) : number | Converts a value in units of vp to a value in units of px. | 22| px2vp(value : number) : number | Converts a value in units of px to a value in units of vp. | 23| fp2px(value : number) : number | Converts a value in units of fp to a value in units of px. | 24| px2fp(value : number) : number | Converts a value in units of px to a value in units of fp. | 25| lpx2px(value : number) : number | Converts a value in units of lpx to a value in units of px. | 26| px2lpx(value : number) : number | Converts a value in units of px to a value in units of lpx. | 27 28 29## Example 30 31 32``` 33@Entry 34@Component 35struct Example { 36 build() { 37 Column() { 38 Flex({ wrap: FlexWrap.Wrap }) { 39 Column() { 40 Text("width(220)") 41 .width(220).height(40).backgroundColor(0xF9CF93) 42 .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') 43 }.margin(5) 44 Column() { 45 Text("width('220px')") 46 .width('220px').height(40).backgroundColor(0xF9CF93) 47 .textAlign(TextAlign.Center).fontColor(Color.White) 48 }.margin(5) 49 Column() { 50 Text("width('220vp')") 51 .width('220vp').height(40).backgroundColor(0xF9CF93) 52 .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') 53 }.margin(5) 54 Column() { 55 Text("width('220lpx') designWidth:720") 56 .width('220lpx').height(40).backgroundColor(0xF9CF93) 57 .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') 58 }.margin(5) 59 Column() { 60 Text("width(vp2px(220) + 'px')") 61 .width(vp2px(220) + 'px').height(40).backgroundColor(0xF9CF93) 62 .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') 63 }.margin(5) 64 Column() { 65 Text("fontSize('12fp')") 66 .width(220).height(40).backgroundColor(0xF9CF93) 67 .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12fp') 68 }.margin(5) 69 }.width('100%') 70 } 71 } 72} 73``` 74 75 76
