HarmonyOS鸿蒙Next中应用px，vp，fp概念如何理解？

HarmonyOS鸿蒙Next中应用px，vp，fp概念如何理解？ 鸿蒙应用px，vp，fp概念如何理解？

5 回复

区别：

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

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

虚拟像素单位：vp。屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素，当数值不带单位时，默认单位vp。vp与px的比例与屏幕像素密度有关。

以屏幕相对像素为单位，表示设备针对应用的虚拟尺寸（与屏幕硬件本身的像素单位不同）。该单位提供了一种灵活的方法来适应不同屏幕密度的显示效果，通过使用虚拟像素，确保元素在不同密度的设备上具有一致的视觉效果。

字体像素单位：fp。字体像素大小默认情况下与 vp 相同，即默认情况下 1 fp = 1 vp。如果用户在设置中选择了更大的字体，字体的实际显示大小就会在vp的基础上乘以scale系数，即 1 fp = 1 vp * scale。

Percentage - 需要指定以%像素单位，如’10%’。

Resource - 资源引用类型，用于设置组件属性的值。

可以通过$r或者$rawfile创建Resource类型对象，不可以修改Resource中的各属性的值。

更多关于HarmonyOS鸿蒙Next中应用px，vp，fp概念如何理解？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


一、结论

1. vp

其实vp的概念很简单，vp是屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素，具有一定的逻辑比例数值。

因为vp在多种设备上不会变形，有一致的视觉体量。当前鸿蒙API接口数值不带单位时，默认单位都为vp，可见这是官方推荐的数值单位。

2. fp

而fp的概念与vp类似，在鸿蒙系统中也是适用屏幕密度变化，随系统字体大小设置变化。是专门用于字体像素的单位。

3. px

像素px是我们移动开发的老熟人了。从产品给的原型图，到UI设计给的效果图设计图，单位基本都是px，有时候我们会转成dp进行比例使用。而在鸿蒙开发中，为了适配多种设备，不同的屏幕像素密度，也有类似于dp的概念，就是综上所述的vp与fp。

因为在鸿蒙应用开发中，与安卓的现状相同，需要适配多种机型，不同的折叠手机。并且鸿蒙特性之一就是自由流程多端适配。一套代码，需要适配多种类设备显示。所以官方不建议使用屏幕像素单位px进行UI数值的设置。道理也很简单了，讲了很多遍，因为设备的屏幕像素密度不同，如果使用px会导致界面UI布局变形。

综上所述，在鸿蒙应用开发中，组件数值使用vp，字体大小使用fp。

二、代码实现和详细解释

如何将px转化为vp或者fp？

首先为什么需要转化呢？因为设计端源头，给的是像素单位，目前的设计软件还给不了vp和fp。所以我们只能将设计图上的像素进行数值转化。官方很贴心提供了十分方便的转化函数：px2vp px2fp

不过最新的api进行了更新，大家需要格外注意。直接使用vp2px/px2vp/fp2px/px2fp/lpx2px/px2lpx可能存在UI上下文不明确的问题，建议使用getUIContext()获取UIContext实例，再使用UIContext下的px2vp，px2fp等等绑定实例的接口。

代码示例，例如：

// 建议使用： this.getUIContext().px2vp()
.width(px2vp(200))

在鸿蒙（HarmonyOS）应用开发中，px、vp、fp 是三种关键的像素单位，其概念和用途如下：

1. px（物理像素）

  • 定义：屏幕上真实的物理像素点，例如分辨率为 1920×1080 表示屏幕宽有 1920 个物理像素点，高有 1080 个物理像素点。
  • 特点：
    • 直接对应硬件像素，不随屏幕密度或字体设置变化。
    • 若直接用于布局或字体，在不同密度的设备上会导致显示变形。
  • 使用建议：不推荐用于UI布局或字体，仅适合处理图像等固定像素资源。

2. vp（虚拟像素）

  • 定义：
    • 鸿蒙的基准逻辑单位，1 vp ≈ 160 dpi 屏幕上的 1 px。
    • 计算公式：vp = (px × 160) / PPI（PPI 为屏幕像素密度）。
  • 特点：
    • 自动根据屏幕密度缩放，确保在不同设备上视觉尺寸一致。
    • 鸿蒙 API 中数值默认单位为 vp（如 .width(100) 即 100 vp）。
  • 使用场景：
    • 推荐用于所有非字体尺寸（如组件宽高、间距等）。
    • 设计稿像素（px）需转换为 vp：
      // 将设计稿的 200px 转换为 vp
.width(this.getUIContext().px2vp(200))

3. fp（字体像素）

  • 定义：
    • 专用于字体的逻辑单位，默认情况下 1 fp = 1 vp。
    • 当用户调整系统字体大小时，fp 会按比例缩放： 缩放后 fp = 原始 fp × scale（scale 为系统字体缩放系数）。
  • 特点：
    • 随系统字体设置动态变化，保障文字可读性。
  • 使用场景：
    • 必须用于所有字体尺寸。
    • 设计稿字体像素（px）需转换为 fp：
      // 将设计稿的 24px 字体转换为 fp
.fontSize(this.getUIContext().px2fp(24))

核心区别总结

单位 全称 用途 是否随屏幕密度变化 是否随系统字体缩放
px 物理像素 图像资源 ❌ ❌
vp 虚拟像素 非字体尺寸 ✅ ❌
fp 字体像素 字体尺寸 ✅ ✅

开发规范

  1. 控件尺寸：使用 vp，通过 px2vp() 转换设计稿的 px 值。
  2. 字体大小：使用 fp，通过 px2fp() 转换设计稿的 px 值。
  3. 避免直接使用 px：防止多设备适配异常。

在HarmonyOS鸿蒙Next中，px、vp和fp是三种不同的屏幕适配单位。

px是物理像素单位，与设备屏幕的实际像素点对应，不随屏幕密度变化。

vp是虚拟像素单位，用于屏幕适配。1vp约等于160dpi屏幕上的1px，会根据屏幕密度自动缩放，保证不同设备上视觉尺寸一致。

fp是字体像素单位，专用于字体大小设置。与vp类似，fp也会根据系统字体大小设置进行缩放，确保文字在不同设备和用户偏好下可读性一致。

在HarmonyOS Next中，px、vp和fp是三种不同的屏幕像素单位，用于实现跨设备的界面自适应布局。

1. px (Physical Pixel) 物理像素 这是最基础的单位，代表屏幕上实际的物理像素点。直接使用px进行布局，在不同屏幕密度（PPI）的设备上，显示的实际物理尺寸会不一致，因此通常不推荐直接用于UI布局。

2. vp (Virtual Pixel) 虚拟像素 这是HarmonyOS为跨设备适配设计的核心概念。vp是一个与屏幕密度无关的逻辑像素单位。

  • 设计基准：以屏幕像素密度为160PPI（约等于mdpi）作为参考。在此屏幕上，1vp 约等于 1px。
  • 换算公式：在不同密度的屏幕上，系统会自动根据公式 px = vp * (屏幕像素密度 / 160) 进行转换。
  • 核心作用：开发者使用vp定义尺寸（如宽度、高度、字体大小），可以保证UI元素在不同屏幕密度的设备上，显示出的物理尺寸（毫米/英寸）大致相同，实现“所见即所得”的视觉一致性。这是布局和控件尺寸推荐使用的单位。

3. fp (Font Pixel) 字体像素 这是专门为字体大小设计的单位。它在vp的基础上，额外考虑了用户的系统字体大小设置偏好。

  • 换算基础：默认情况下，1fp 等于 1vp。
  • 核心作用：当用户在系统设置中调整“字体大小”时（例如设置为“大”），使用fp为单位的文本尺寸会随之等比缩放，而使用vp或px的文本则不会改变。这确保了应用内的文本可访问性，尊重用户的阅读习惯。

简单总结与使用建议：

  • px： 通常用于需要精确像素对齐的场景（如分割线、边框），或处理与屏幕物理像素直接相关的底层图形（如图像资源）。常规UI布局应避免使用。
  • vp： UI布局的标准单位。用于定义视图、组件的宽高、间距、圆角等所有非字体尺寸。它能保证在不同屏幕密度的设备上视觉大小一致。
  • fp： 字体大小的专用单位。用于定义所有文本的尺寸。它能确保应用文字随系统字体设置变化，提升可访问性。

示例： 假设设计稿基于360PPI的屏幕绘制了一个宽度为180像素的按钮。

  • 若直接写180px，在180PPI的屏幕上，按钮的物理宽度会看起来大一倍。
  • 使用180vp，系统会自动计算。在360PPI设备上，实际渲染为 180 * (360/160) = 405px；在180PPI设备上，则渲染为 180 * (180/160) = 202.5px。最终，这两个按钮在各自设备上实际的物理尺寸（厘米）是接近的。
  • 按钮上的文字若设为16fp，当用户调大系统字体后，文字会等比放大，而按钮的180vp宽度不变。
回到顶部