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

官方文档:文档中心
1. px
屏幕物理像素单位.比如:电脑分辨率1920*1080, 宽就为1920px.高就为1080px.
  

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

复制代码

 

2. vp
屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素，当数值不带单位时，默认单位vp。
vp与px的比例与屏幕像素密度有关.也就是说1个物理像素里面包罗的像素就是vp,可以称为真实像素,1px像素包罗的真实像素越多,越清晰,这也是为什么有的相机像素明显不高却很清晰的缘故原由.
 在编辑器中,1vp约等于3px.注意是约等于.在预览器下看不出,但在模拟器下就较清晰了
  

1. Row(){
2.   Text('vp').fontColor(Color.White).fontSize(20)
3. }.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. 示例代码

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

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。