HarmonyOS 屏幕适配设计

news/2024/9/2 7:53:44/ 标签: 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.ppmy.cn/news/1475713.html

相关文章

如何安装Visual Studio Code

Visual Studio Code(简称 VS Code) Visual Studio Code 是一款由微软开发的免费、开源的现代化轻量级代码编辑器。 主要特点包括: 跨平台:支持 Windows、Mac 和 Linux 等主流操作系统,方便开发者在不同平台上保持一…

STM32智能健康监测系统教程

目录 引言环境准备智能健康监测系统基础代码实现:实现智能健康监测系统 4.1 数据采集模块 4.2 数据处理与分析模块 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景:健康监测与优化问题解决方案与优化收尾与总结 1. 引言 智能健康监测系统通…

LLM-阿里 DashVector + langchain self-querying retriever 优化 RAG 实践【Query 优化】

文章目录 前言self querying 简介代码实现总结 前言 现在比较流行的 RAG 检索就是通过大模型 embedding 算法将数据嵌入向量数据库中,然后在将用户的查询向量化,从向量数据库中召回相似性数据,构造成 context template, 放到 LLM 中进行查询…

网站开发:使用VScode安装yarn包和运行前端项目

一、首先打开PowerShell-管理员身份运行ISE 输入命令: set-ExecutionPolicy RemoteSigned 选择“全是”,表示允许在本地计算机上运行由本地用户创建的脚本,没有报错就行了 二、接着打开VScode集成终端 输入 npm install -g yarn 再次输入以…

人工智能算法工程师(中级)课程12-PyTorch神经网络之LSTM和GRU网络与代码详解1

大家好,我是微学AI,今天给大家介绍一下人工智能算法工程师(中级)课程12-PyTorch神经网络之LSTM和GRU网络与代码详解。在深度学习领域,循环神经网络(RNN)因其处理序列数据的能力而备受关注。然而,传统的RNN存在梯度消失和梯度爆炸的问题,这使得它在长序列任务中的表现不尽…

CSS图像不透明度的艺术:探索透明度控制的无限可能

在网页设计中,图像的不透明度(Opacity)和透明度(Transparency)是两个关键的概念,它们不仅影响着页面的视觉效果,还能增强用户体验,创造丰富的交互效果。通过调整图像的不透明度&…

Matplotlib库学习之mpl_toolkits.mplot3d.Axes3D函数

Matplotlib库学习之mpl_toolkits.mplot3d.Axes3D函数 一、简介 mpl_toolkits.mplot3d.Axes3D 是 Matplotlib 的 mpl_toolkits.mplot3d 工具包中的一个类,用于创建三维坐标轴(3D Axes)。这个类继承自 matplotlib.axes.Axes,提供了…

el-table的selection多选表格改为单选

需求场景: 选择表格数据时&#xff0c;需要控制单条数据的操作按钮是否禁用。 效果图: html代码: <div><el-tableref"multipleTable":data"tableData"tooltip-effect"dark"style"width: 100%"selection-change"handl…

【Pytorch实战教程】对抗样本生成中是如何添加噪声的?

文章目录 对抗样本中添加随机生成的对抗噪声代码解析应用场景示例代码对抗样本中添加随机生成的对抗噪声 通常在对抗训练或者生成对抗样本时使用,目的是为了稍微扰动模型的输入数据,从而测试或增强模型在面对输入数据轻微变化时的鲁棒性。 x = x + torch.zeros_like(x).uni…

普中51单片机:串口通信原理与应用指南(八)

文章目录 引言接口及引脚定义硬件电路电平标准常见通信接口比较51单片机的UART工作模式串口参数及时序图波特率&#xff08;Baud Rate&#xff09;数据位&#xff08;Data Bits&#xff09;校验位&#xff08;Parity Bit&#xff09; 串口相关寄存器串口控制寄存器SCON电源控制…

k8s怎么配置secret呢?

在Kubernetes中&#xff0c;配置Secret主要涉及到创建、查看和使用Secret的过程。以下是配置Secret的详细步骤和相关信息&#xff1a; ### 1. Secret的概念 * Secret是Kubernetes用来保存密码、token、密钥等敏感数据的资源对象。 * 这些敏感数据可以存放在Pod或镜像中&#x…

Hive 常见问题

Hive 内部表和外部表的区别 外部表在创建时需要加关键字 external&#xff1b;创建内部表时&#xff0c;会将数据移动到数据仓库指定的路径&#xff1b;创建外部表时&#xff0c;不会移动数据&#xff0c;只会记录数据所在的路径&#xff1b;删除内部表时&#xff0c;会删除元…

爬虫技术探索:Node.js 的优势与实践

在大数据时代&#xff0c;数据挖掘与分析成为了企业和研究机构的重要工作之一。而网络爬虫作为获取公开网络数据的关键工具&#xff0c;其重要性不言而喻。在众多编程语言中&#xff0c;Node.js 因其异步非阻塞I/O模型、丰富的第三方库支持以及与现代Web技术的紧密集成&#xf…

Android系统上常见的性能优化工具

Android系统上常见的性能优化工具 在Android系统开发中&#xff0c;性能优化是一个重要的任务&#xff0c;有许多工具可以帮助你进行各种方面的性能分析和优化。以下是一些常见的Android性能优化工具及其用途和使用方法&#xff1a; 1. Android Studio Profiler 功能: 提供CP…

qt 创建一个矩形,矩形的边线可以拖拽

在Qt中&#xff0c;要创建一个矩形&#xff0c;其边线可以拖拽&#xff0c;你可以使用QGraphicsView和QGraphicsScene来实现。以下是一个简单的示例&#xff0c;展示如何创建一个矩形&#xff0c;并且它的边线可以被拖拽来改变矩形的大小。 首先&#xff0c;你需要包含必要的Q…

vs code 启动react项目,执行npm start报错原因分析

1.执行 npm start错误信息&#xff1a;npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写&#xff0c;如果包括路径&#xff0c;请确保路径正确&#xff0c;然后再试一次。 所在位置 行:1 字符: 1 npm start ~~~ CategoryInfo …

【Python百日进阶-Web开发-音频】Day702 - librosa安装及模块一览表

文章目录 一、Librosa简介与安装1.1 Librosa是什么1.2 Librosa官网 二、Librosa安装2.1 安装Librosa 三、安装ffmpeg3.1 ffmpeg官网下载3.2 ffmpeg安装3.2.1 解压3.2.2 添加环境变量3.2.3 测试ffmpeg是否安装成功 四、Librosa 库模块一览4.1 库函数结构4.2 Audio processing&am…

cuda缓存示意图

一、定义 cuda 缓存示意图gpu 架构示意图gpu 内存访问示意图 二、实现 cuda 缓存示意图 DRAM: 通常指的是GPU的显存&#xff0c;位于GPU芯片外部&#xff0c;通过某种接口&#xff08;如PCIE&#xff09;与GPU芯片相连。它是GPU访问的主要数据存储区域&#xff0c;用于存储大…

1.31、基于长短记忆网络(LSTM)的发动机剩余寿命预测(matlab)

1、基于长短记忆网络(LSTM)的发动机剩余寿命预测的原理及流程 基于长短期记忆网络(LSTM)的发动机剩余寿命预测是一种常见的机器学习应用&#xff0c;用于分析和预测发动机或其他设备的剩余可用寿命。下面是LSTM用于发动机剩余寿命预测的原理和流程&#xff1a; 数据收集&#…

数据中心巡检机器人助力,河南某数据中心机房智能化辅助项目交付

随着数据中心规模的不断扩大和业务需求的不断增长&#xff0c;确保其高效、安全、稳定地运行变得愈发重要。传统的人力巡检方式存在效率低、误差高、成本大等问题&#xff0c;难以满足现代数据中心的需求。为解决这些挑战&#xff0c;智能巡检机器人应运而生&#xff0c;成为数…