鸿蒙: 像素单位(px,vp,fp,lpx)

官方文档:文档中心

1. px

屏幕物理像素单位.比如:电脑分辨率1920*1080, 宽就为1920px.高就为1080px.

Row() {
  Text('px').fontColor(Color.White).fontSize(20)
}.width('300px').height('300px').backgroundColor(Color.Blue).justifyContent(FlexAlign.Center)

 

2. vp

屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素，当数值不带单位时，默认单位vp。

vp与px的比例与屏幕像素密度有关.也就是说1个物理像素里面包含的像素就是vp,可以称为真实像素,1px像素包含的真实像素越多,越清晰,这也是为什么有的相机像素明明不高却很清晰的原因.

 在编辑器中,1vp约等于3px.注意是约等于.在预览器下看不出,但在模拟器下就较清晰了

Row(){
  Text('vp').fontColor(Color.White).fontSize(20)
}.width(100).height(100).backgroundColor(Color.Green).justifyContent(FlexAlign.Center)

 

3. fp

字体像素，与vp类似适用屏幕密度变化，随系统字体大小设置变化。也就是在手机设置中修改字体大小可以使字体发生变化

4. lpx

视窗逻辑像素单位，lpx单位为实际屏幕宽度与逻辑宽度（通过designWidth配置）的比值，designWidth默认值为720。当designWidth为720时，在实际宽度为1440物理像素的屏幕上，1lpx为2px大小。相当于前端的rem/vh

5.  单位转换

官方还提供了一堆方法,可以在单位之间进行转换.

6. 示例代码

@Entry
@Component
struct PxVpFpLpxCase {
// 此demo参考文档: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-pixel-units-V5
  build() {
    Column() {
      // 1px 约等于 3px
      Row(){
        Text('vp').fontColor(Color.White).fontSize(20)
      }.width(100).height(100).backgroundColor(Color.Green).justifyContent(FlexAlign.Center)
      Row() {
        Text('px').fontColor(Color.White).fontSize(20)
      }.width('300px').height('300px').backgroundColor(Color.Blue).justifyContent(FlexAlign.Center)
      // px2vp()方法将px单位转化为vp,除此之外还有px2fp(),px2lpx(),vp2px(),lpx2px()等等
      // Row().width(px2vp(300)).height(px2vp(300)).backgroundColor(Color.Red)
      // fp: 字体像素，与vp类似适用屏幕密度变化，随系统字体大小设置变化(系统内改变字体大小可改变字体大小)。
      Text('50fp').fontSize('50fp')
      Text('50vp').fontSize('50vp')
      // lpx 适配一端时的方案,需要设置基准值:默认720
      // 配置路径: src/main/resources/base/profile/main_pages.json
      // 配置属性名window,格式为对象,内嵌套前置对为参数
      // 配置文档链接: http s://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/module-configuration-file-V5#pages%E6%A0%87%E7%AD%BE
      //参数名为:designWidth  标识页面设计基准宽度。以此为基准，根据实际设备宽度来缩放元素大小, number,可缺省，缺省值为720px
      //当designWidth为720时，在实际宽度为1440物理像素的屏幕上，1lpx为2px大小
      Row(){
        Text('lpx').fontColor('#fff')
      }.width('375lpx').height(200).backgroundColor('black').justifyContent(FlexAlign.Center)
    }.width('100%')
  }
}