当前位置: 首页 > news >正文

HarmonyOS 屏幕适配设计

1. armonyOS 屏幕适配设计

1.1. 像素单位

(1)px (Pixels)
  px代表屏幕上的像素点,是手机屏幕分辨率的单位,即屏幕物理像素单位。
(2)vp (Viewport Percentage)
  vp是视口百分比单位,基于视口(即浏览器窗口)的宽度或高度,屏幕密度相关像素,根据屏幕像素密度转换为屏幕物理像素,当数值不带单位时,默认单位vp。在实际宽度为1440物理像素的屏幕上,1vp约等于3px。它允许组件的大小根据视口的大小动态调整。常用于响应式设计,确保组件在不同屏幕尺寸上保持相对大小。
**(3)lpx (Logical Pixels) **
  lpx是逻辑像素单位,用于解决不同设备分辨率和像素密度的问题。
  lpx单位为实际屏幕宽度与逻辑宽度(通过designWidth配置)的比值,designWidth默认值为720。当designWidth为720时,在实际宽度为1440物理像素的屏幕上,1lpx为2px大小。
在这里插入图片描述

1.2. 逻辑宽度

  "window": {"designWidth": 720,"autoDesignWidth": false}
属性名称含义数据类型是否可缺省
designWidth标识页面设计基准宽度。以此为基准,根据实际设备宽度来缩放元素大小。数值可缺省,缺省值为720px。
autoDesignWidth标识页面设计基准宽度是否自动计算。当配置为true时,designWidth将会被忽略,设计基准宽度由设备宽度与屏幕密度计算得出。布尔值可缺省,缺省值为false。

在这里插入图片描述

  它基于设备的像素密度进行转换,以提供一致的视觉尺寸。当你缩放宽高的时候,可以自动适配。

1.3. 核心

  vp这个概念实际上来源于android的dp,是一个屏幕密度值,用来解决不同比例和屏幕像素的差异。
  vp虽然也做到了自适应,但是计算方式是根据屏幕斜边来计算。这也导致在UI还原遇到的最大问题就是很难按照设计图进行快速的编写代码。并且相同的vp,在不同机型上展示的效果是有问题的。即虽然进行了自适用,但是因为计算方式是按照斜边,所以在水平方向上的宽度在各机型展示的实际宽度百分比是不一致,导致UI还原上存在问题。
  lpx是以720px为基准计算的相对像素;目前主流的屏幕720分辨率已经很低配了。我个人建议直接用LPX,但是目前大部分的APi都是基于VP来计算的。这样在实际的开发中,可以用函数转换。
  Harmony要多一个lpx,是因为鸿蒙是跨端的,也就是存在 pc、pad 等,在其他的端存在视窗可以拉长缩小的情况,所以这个主要是应用在需要适配多端的场景。

http://www.lryc.cn/news/400573.html

相关文章:

  • Netfilter之连接跟踪(Connection Tracking)和反向 SNAT(Reverse SNAT)
  • Linux下使用vs code离线安装各种插件
  • 【常见开源库的二次开发】基于openssl的加密与解密——Base58比特币钱包地址——算法分析(三)
  • Linux操作系统——数据库
  • 【数据结构与算法】希尔排序:基于插入排序的高效排序算法
  • 关于正点原子的alpha开发板的启动函数(汇编,自己的认识)
  • Deep Layer Aggregation【方法部分解读】
  • 大数据面试SQL题-笔记01【运算符、条件查询、语法顺序、表连接】
  • 零基础自学爬虫技术该从哪里开始入手?
  • CV11_模型部署pytorch转ONNX
  • Redis的使用(四)常见使用场景-缓存使用技巧
  • BERT架构的深入解析
  • 数字孪生技术如何助力低空经济飞跃式发展?
  • HTTP背后的故事:理解现代网络如何工作的关键(二)
  • 数据流通环节如何规避安全风险
  • 部署k8s 1.28.9版本
  • 实验二:图像灰度修正
  • bash: ip: command not found
  • 全开源TikTok跨境商城源码/TikTok内嵌商城/前端uniapp+后端+搭建教程
  • 云原生、Serverless、微服务概念
  • Windows上LabVIEW编译生成可执行程序
  • ref 和 reactive 区别
  • 深度学习计算机视觉中, 多尺度特征和上下文特征的区别是?
  • Facebook未来展望:数字社交平台的进化之路
  • uniapp-vue3-vite 搭建小程序、H5 项目模板
  • sealos快速安装k8s
  • 智慧水利:迈向水资源管理的新时代,结合物联网、云计算等先进技术,阐述智慧水利解决方案在提升水灾害防控能力、优化水资源配置中的关键作用
  • MATLAB——字符串处理
  • Qt实现一个简单的视频播放器
  • 微服务治理新篇章:Eureka中细粒度策略管理实现