鸿蒙: 像素单位(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) https://img-blog.csdnimg.cn/direct/1b790ffe0e844c16b59f5adcedf1df20.png
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) https://img-blog.csdnimg.cn/direct/701324d39ace4f8da7495512d1cb4321.png
https://img-blog.csdnimg.cn/direct/e4170d553f034cbb9d8cd817d0073124.png
3. fp
字体像素，与vp雷同实用屏幕密度变化，随体系字体大小设置变化。也就是在手机设置中修改字体大小可以使字体发生变化
https://img-blog.csdnimg.cn/direct/1c1a88d6d68a42ffb99062a9d8c7e022.png
4. lpx
视窗逻辑像素单位，lpx单位为实际屏幕宽度与逻辑宽度（通过designWidth配置）的比值，designWidth默认值为720。当designWidth为720时，在实际宽度为1440物理像素的屏幕上，1lpx为2px大小。相称于前端的rem/vh
https://img-blog.csdnimg.cn/direct/937d41207ff94e67a792f7c1600ac730.png
5. 单位转换
官方还提供了一堆方法,可以在单位之间进行转换.
https://img-blog.csdnimg.cn/direct/61ab708c77574239b6854979ceae1972.png
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%')
}
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]