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 等,在其他的端存在视窗可以拉长缩小的情况,所以这个主要是应用在需要适配多端的场景。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/799931.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于单片机的智能医疗监护系统设计

1.简介 随着社会的发展,智能化电子设备成为了人们生活中不可或缺的一部分,尤其是在人们对于身心健康更加注重的今天,智能医疗监护系统应运而生。本套电子监护设备集体温测量、心电采集、心率监测、血氧监测于一体,带有语音播报模块…

图——图的应用01最小生成树(Prim算法与Kruskal算法详解)

这篇文章就来讲一下图的最后的应用章节中的最小生成树,包括Prim算法与Kruskal算法两大部分,在实际问题当中应用很广。在对于前面的内容熟悉的情况下再学习本章比较好哦,图的基本概念,存储结构以及图的遍历。大家可以通过下面的链接…

iPhone数据恢复:如何从iPhone恢复误删除的短信

来自iPhone的意外删除的短信可能很关键。它们可能是来自您常用应用程序、银行交易、付款收据的重要通知,也可能是来自朋友的重要文本、孩子的学校通知等。 如果您也从iPhone丢失了此类消息,我们在这里分享如何在没有备份以及有备份的情况下在iPhone上恢…

JVM和类加载机制-01[JVM底层架构和JVM调优]

JVM底层 Java虚拟机内存模型JVM组成部分五大内存区域各自的作用虚拟机栈(线程栈)栈帧内存区域 本地方法栈程序计数器为什么jvm要设计程序计数器? 堆方法区 JVM优化-堆详解JVM底层垃圾回收机制jvm调优工具jvisualvm.exeArthas工具使用 Java虚拟机内存模型 JVM跨平台原…

go Sync.Pool

sync 包提供了一个强大且可复用的实例池,以减少 GC 压力。在使用该包之前,我们需要在使用池之前和之后对应用程序进行基准测试。这非常重要,因为如果不了解它内部的工作原理,可能会影响性能。 池的限制 type Small struct {a in…

dhtmlx-gantt甘特图数据展示

官网文档&#xff1a;甘特图文档 实现效果&#xff1a; 首先需要下载 dhtmlx-gantt组件 npm i dhtmlx-gantt //我项目中使用的是"dhtmlx-gantt": "^8.0.6" 这个版本&#xff0c;不同的版本api或是文档中存在的方法稍有差异 界面引用 <template>&l…

iOS ------ 类 父类 元类的总结

一&#xff0c;类的定义 类在OC中其实是指向objc_class的结构体指针&#xff0c;结构体构造我 typedef struct objc_class *Class; struct objc_class { Class isa; Class super_class; const char *name; long version; long info; long instance_size; struct obj…

ElementUI el-select 组件动态设置disabled后,高度变更的问题解决办法

问题描述 Vue2 项目在使用 el-select 组件时&#xff0c;动态将disabled变更为了 true&#xff0c;元素的高度发生了变化。 问题原因 通过浏览器开发人员工具面板&#xff0c;发现&#xff0c;组件内的 input 元素被动态设置了height的样式&#xff1a; 在项目中检查后并…

基于STM32设计的超声波测距仪(微信小程序)(186)

基于STM32设计的超声波测距仪(微信小程序)(186) 文章目录 一、前言1.1 项目介绍【1】项目功能介绍【2】项目硬件模块组成1.2 设计思路【1】整体设计思路【2】ESP8266工作模式配置1.3 项目开发背景【1】选题的意义【2】可行性分析【3】参考文献1.4 开发工具的选择1.5 系统框架图…

<数据集>钢板缺陷检测数据集<目标检测>

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;1986张 标注数量(xml文件个数)&#xff1a;1986 标注数量(txt文件个数)&#xff1a;1986 标注类别数&#xff1a;7 标注类别名称&#xff1a;[crescent gap, silk spot, water spot, weld line, oil spot, punchin…

人工智能算法工程师(中级)课程14-神经网络的优化与设计之拟合问题及优化与代码详解

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下人工智能算法工程师(中级)课程14-神经网络的优化与设计之拟合问题及优化与代码详解。在机器学习和深度学习领域&#xff0c;模型的训练目标是找到一组参数&#xff0c;使得模型能够从训练数据中学习到有用的模式&am…

mysql命令练习

创建数据表grade: CREATE TABLE grade( id INT NOT NULL&#xff0c; sex CHAR(1)&#xff0c; firstname VARCHAR(20) NOT NULL&#xff0c; lastname VARCHAR(20) NOT NULL&#xff0c; english FLOAT&#xff0c; math FLOAT, chinese FLOAT )&#xff1b; 向数据表grade中插…

基于springboot与vue的旅游推荐系统与门票售卖

&#x1f497;博主介绍&#x1f497;&#xff1a;✌在职Java研发工程师、专注于程序设计、源码分享、技术交流、专注于Java技术领域和毕业设计✌ 温馨提示&#xff1a;文末有 CSDN 平台官方提供的老师 Wechat / QQ 名片 :) Java精品实战案例《700套》 2025最新毕业设计选题推荐…

图像边缘检测中Sobel算子的原理,并附OpenCV和Matlab的示例代码

Sobel算子是一种用于图像边缘检测的离散微分算子。它结合了图像的平滑处理和微分计算&#xff0c;旨在强调图像中强度变化显著的区域&#xff0c;即边缘。Sobel算子在图像处理中被广泛使用&#xff0c;特别是在计算机视觉和图像分析领域。 Sobel算子的原理 Sobel算子主要用于计…

zookeeper+kafka的消息队列

zookeeperKafka 两个都是消息队列的工具 消息队列 出现原因&#xff1a;生产者产生的消息与消费者处理消息的效率相差很大。为了避免出现数据丢失而设立的中间件。 在消息的生产者与消费之间设置一个系统&#xff0c;负责缓存生产者与消费者之间的消息的缓存。将消息排序。 优…

SpringMVC注解全解析:构建高效Web应用的终极指南 (上)

SpringMVC 是一个强大的 Web 框架&#xff0c;广泛应用于 Java Web 开发中。它通过注解简化了配置&#xff0c;增强了代码的可读性。本文将全面解析 SpringMVC 中常用的注解及其用法&#xff0c;帮助你构建高效的 Web 应用。 一. MVC介绍 MVC 是 Model View Controller 的缩写…

鸿蒙语言基础类库:【@system.bluetooth (蓝牙)】

蓝牙 说明&#xff1a; 开发前请熟悉鸿蒙开发指导文档&#xff1a;gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。 从API Version 7 开始&#xff0c;该接口不再维护&#xff0c;推荐使用新接口[ohos.bluetooth]。本模块首批接口从API version…

反序列化漏洞详细介绍

反序列化漏洞详细介绍: 反序列化漏洞是软件开发中一个严重的安全问题&#xff0c;尤其在使用网络通信和持久化数据的应用中更为常见。下面是对反序列化漏洞的详细介绍&#xff1a; 原理 序列化是将对象的状态信息转换为可以存储或传输的格式&#xff08;如字节流&#xff09…

【TAROT】韦特体系塔罗牌学习(2)——魔术师 THE MAGICIAN I

韦特体系塔罗牌学习&#xff08;2&#xff09;——魔术师 THE MAGICIAN I 目录 韦特体系塔罗牌学习&#xff08;2&#xff09;——魔术师 THE MAGICIAN I牌面分析1. 基础信息2. 图片元素 正位牌意1. 关键词/句2.爱情婚姻3. 学业事业4. 人际关系5. 其他象征意 逆位牌意1. 关键词…

python数据可视化(5)——绘制饼图

课程学习来源&#xff1a;b站up&#xff1a;【蚂蚁学python】 【课程链接&#xff1a;【【数据可视化】Python数据图表可视化入门到实战】】 【课程资料链接&#xff1a;【链接】】 Python绘制饼图分析北京天气 饼图&#xff0c;是一个划分为几个扇形的圆形统计图表&#xff…