鸿蒙应用开发中的单位详解：px、vp、fp、lpx

这是一个使用鸿蒙技术开发的本地原生记账应用，非常适合大家用来练手。相关源码已上传至 Github，点击此处查看项目。欢迎大家交流、指正，也欢迎提交 PR。

一、引言

在鸿蒙应用开发中，单位的选择直接影响到 UI 在不同屏幕上的显示效果。很多初学者会疑惑：文本的宽高后面跟的数字到底代表什么？为什么在不同手机上显示的大小不一样？本文将带你快速搞懂鸿蒙开发中的四种核心单位：px、vp、fp 和 lpx。

二、px：物理像素单位

px 是屏幕上的实际物理像素单位。1px 代表手机屏幕上的一个像素点。

2.1 代码演示

例如，设置一个文本组件的宽为 375px，高为 150px，它就会在屏幕上占据 375×150 个像素点的区域。

ts 复制代码

@Entry
@Component
struct Index {
  build() {
    Text("你好，鸿蒙")
      .width("375px")
      .height("100px")
      .backgroundColor(Color.Orange)
      .textAlign(TextAlign.Center)
  }
}

运行效果：

2.2 为什么不推荐直接使用 px？

因为不同手机的分辨率不同。分辨率高的设备，在相同物理尺寸下像素点更密集；分辨率低的设备，像素点更稀疏。

同样是 3 个像素，在分辨率高的手机上可能只显示很小一块；
在分辨率低的手机上，却可能显示得相对较大。

这样会导致同一个 UI 元素在不同设备上呈现出的物理大小不一致，严重影响适配效果。因此，在鸿蒙开发中，一般不直接使用 px 作为单位。

三、vp：虚拟像素单位

vp（Virtual Pixel）是鸿蒙中最常用的单位，它与屏幕密度相关，能够根据屏幕密度自动转化为物理像素。

3.1 默认单位

在鸿蒙中，当你在数值后不带单位时，默认使用的就是 vp。例如：

arkts 复制代码

Text('Hello')
  .width(200) // 默认单位是 vp
  .height(100)

3.2 核心优势

使用 vp 作为单位，能够让 UI 元素在不同密度的设备上表现出一致的物理大小。简单来说，同一个使用 vp 的元素，在不同分辨率的设备上，看起来大小是一样的。

3.3 效果演示

当你改变屏幕大小时，以 vp 为单位的元素大小并不会随之发生变化，它始终保持视觉上的一致。

屏幕稍微放到后的展示效果：

屏幕继续放大后的展示效果：

从两张图的展示效果可以看出，黄色区域大小是一样的。

四、fp：字体像素单位

fp（Font Pixel）是专门用于字体的像素单位。

4.1 与 vp 的关系

默认情况下，1fp = 1vp。
但是，如果用户在系统设置中选择了更大的字体，字体的实际显示大小会在 vp 的基础上乘以一个缩放系数。

4.2 使用建议

一般情况下，字体默认选用 vp 即可满足大部分需求。fp 主要用于需要跟随系统字体大小设置而变化的场景，暂时作为了解即可。

五、lpx：视图逻辑像素单位

lpx（Logical Pixel）是鸿蒙中的视图逻辑像素单位，它有点类似于前端开发中的 rem。

5.1 核心特性

使用 lpx 作为单位的元素，会随着屏幕大小的变化而变化。当屏幕变大时，元素也会等比放大；屏幕变小时，元素也会等比缩小。

5.2 配置要求

使用 lpx 时，需要在 main_pages.json 文件中进行配置，设置设计稿的宽度值，如设计稿基准宽度为 750：

json 复制代码

{
  "designWidth": 750
}

这个值就是你设计稿的基准宽度，系统会根据当前屏幕宽度与设计稿宽度的比例，自动计算 lpx 的实际像素值。

5.3 效果演示

改变屏幕大小时，以 lpx 为单位的文本元素会跟随屏幕尺寸动态变化。

屏幕原有尺寸展示效果：

屏幕放大后的效果：

可以看到屏幕变化后，黄色区域依然保持占有屏幕一半的尺寸。

六、如何选择合适的单位？

在实际开发中，具体使用哪个单位，需要根据实际需求进行分析：

单位	适用场景
`vp`	需要确保组件在不同屏幕尺寸上保持一样大小时使用
`lpx`	需要确保组件在不同设备上等比缩放、看起来比例一致时使用
`fp`	需要跟随系统字体大小设置时使用（字体专用）
`px`	极少使用，仅在需要精确到物理像素的场景下使用

七、总结

px：物理像素，不推荐直接使用，适配性差。
vp：虚拟像素，默认单位，保证不同设备上视觉大小一致。
fp：字体像素，跟随系统字体设置，默认与 vp 等值。
lpx：逻辑像素，等比缩放，类似前端的 rem，需配置设计稿宽度。

掌握这四种单位的区别与使用场景，就能在鸿蒙开发中轻松应对各种屏幕适配问题。