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

一、引言

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

二、px：物理像素单位

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

2.1 代码演示

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

@Entry@Componentstruct 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。例如：

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：

{"designWidth":750}

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

5.3 效果演示

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

屏幕原有尺寸展示效果：

屏幕放大后的效果：

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

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

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

七、总结

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

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