HarmonyOS 屏幕适配设计

news2024/9/22 13:41:38

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.coloradmin.cn/o/1928428.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java学习之SPI、JDBC、SpringFactoriesLoader、Dubbo

概述 SPI,Service Provider Interface,一种服务发现机制,指一些提供给你继承、扩展,完成自定义功能的类、接口或方法。 在SPI机制中,服务提供者为某个接口实现具体的类,而在运行时通过SPI机制&#xff0c…

Facebook未来展望:数字社交平台的进化之路

在信息技术日新月异的时代,社交媒体平台不仅是人们交流沟通的重要工具,更是推动社会进步和变革的重要力量。作为全球最大的社交媒体平台之一,Facebook在过去十多年里,不断创新和发展,改变了数十亿用户的社交方式。展望…

构建企业多层社会传播网络:以AI智能名片S2B2C商城小程序为例

摘要:在数字化转型的浪潮中,企业如何有效构建并优化其社会传播网络,已成为提升市场竞争力、深化用户关系及实现价值转化的关键。本文以AI智能名片S2B2C商城小程序为例,深入探讨如何通过一系列精细化的策略与技术创新,构…

IP地址知识点

一、IP地址组成 把一个IP地址分成两部分:网络号(标识了一个局域网)主机号(标识了一个局域网中的设备) 下图是通过一个路由器连接的两个局域网(两个相邻的局域网),网络号不相同&…

AI绘画入门实践|Midjourney 的模型版本

模型分类 Midjourney 的模型主要分为2大类: 默认模型:目前包括:V1, V2, V3, V4, V5.0, V5.1, V5.2, V6 NIJI模型:目前包括:NIJI V4, NIJI V5, NIJI V6 模型切换 你在服务器输入框中输入 /settings: 回车后…

Mac电脑清理软件有哪些 MacBooster和CleanMyMac哪个好用 苹果电脑清理垃圾软件推荐 cleanmymac和柠檬清理

对于苹果电脑用户来说,‌选择合适的清理软件可以帮助优化电脑性能,‌释放存储空间,‌并确保系统安全。一款好用的苹果电脑清理软件,能让Mac系统保持良好的运行状态,避免系统和应用程序卡顿的产生。有关Mac电脑清理软件…

什么是MOW,以bitget钱包为例

元描述:MOW凭借其富有创意的故事情节和广阔的潜力在Solana上脱颖而出。本文深入探讨了其独特的概念和光明的未来。 Mouse in a Cats World (MOW)是一个基于Solana区块链的创新meme项目,它重新构想了一个异想天开且赋予权力的故事。在这个奇幻的宇宙中&am…

JuiceFS、Ceph 和 MinIO 结合使用

1. 流程图 将 JuiceFS、Ceph 和 MinIO 结合使用,可以充分利用 Ceph 的分布式存储能力、JuiceFS 的高性能文件系统特性,以及 MinIO 提供的对象存储接口。以下是一个方案,介绍如何配置和部署 JuiceFS 使用 Ceph 作为其底层存储,并通…

非法闯入智能监测摄像机:安全守护的新利器

在当今社会,安全问题愈发受到重视。随着科技的进步,非法闯入智能监测摄像机应运而生,成为保护家庭和财产安全的重要工具。这种摄像机不仅具备监控功能,还集成了智能识别和报警系统,能够在第一时间内检测到潜在的入侵行…

three.js创建基础模型

场景是一个三维空间,是所有物品的容器。可以将其想象成一个空房间,里面可以放置要呈现的物体、相机、光源等。 通过new THREE.Scene()来创建一个新的场景。 /**1. 创建场景 -- 放置物体对象的环境*/ const scene new THREE.Scene();场景只是一个三维的…

JVM(day2)

经典垃圾收集器 Serial收集 使用一个处理器或一条收集线程去完成垃圾收集工作,更重要的是强调在它进行垃圾收集时,必须暂停其他所有工作线程,直到它收集结束。 ParNew收集器 ParNew 收集器除了支持多线程并行收集之外,其他与 …

HTTP背后的故事:理解现代网络如何工作的关键(二)

一.认识请求方法(method) 1.GET方法 请求体中的首行包括:方法,URL,版本号 方法描述的是这次请求,是具体去做什么 GET方法: 1.GET 是最常用的 HTTP 方法. 常用于获取服务器上的某个资源。 2.在浏览器中直接输入 UR…

【实战:Django-Celery-Flower实现异步和定时爬虫及其监控邮件告警】

1 Django中集成方式一(通用方案) 1.1 把上面的包-复制到djagno项目中 1.2 在views中编写视图函数 1.3 配置路由 1.4 浏览器访问,提交任务 1.5 启动worker执行任务 1.6 查看任务结果 2 Django中集成方式二(官方方案&#xff0…

25_Vision Transformer原理详解

1.1 简介 Vision Transformer (ViT) 是一种将Transformer架构从自然语言处理(NLP)领域扩展到计算机视觉(CV)领域的革命性模型,由Google的研究人员在2020年提出。ViT的核心在于证明了Transformer架构不仅在处理序列数据(如文本)方面非常有效&…

探索智能合约在金融科技中的前沿应用与挑战

随着区块链技术的发展和普及,智能合约作为其核心应用之一,在金融科技(FinTech)领域中展现出了巨大的潜力和挑战。本文将深入探讨智能合约的基本概念、前沿应用案例,以及面临的技术挑战和发展趋势,旨在帮助读…

redis笔记2

redis是用c语言写的,放不频繁更新的数据(用户数据。课程数据) Redis 中,"穿透"通常指的是缓存穿透(Cache Penetration)问题,这是指一种恶意或非法请求直接绕过缓存层,直接访问数据库或…

HouseCrafter:平面草稿至3D室内场景的革新之旅

在室内设计、房地产展示和影视布景设计等领域,将平面草稿图快速转换为立体的3D场景一直是一个迫切的需求。HouseCrafter,一个创新的AI室内设计方案,正致力于解决这一挑战。本文将探索HouseCrafter如何将这一过程自动化并提升至新的高度。 一、定位:AI室内设计的革新者 Ho…

通过MATLAB控制TI毫米波雷达的工作状态之TLV数据解析及绘制

前言 前一章博主介绍了如何基于设计视图中的这些组件结合MATLAB代码来实现TI毫米波雷达数据的实时采集。这一章将在此基础上实现TI毫米波雷达的TLV数据解析。过程中部分算法会涉及到一些简单的毫米波雷达相关算法,需要各位有一定的毫米波雷达基础。 TLV数据之协议解析 紧着…

爬虫学习 | 01 Web Scraper的使用

目录 背景介绍: 第一部分:Web Scraper简介 1.什么是Web Scraper: Web Scraper🛒 主要用途: 2.为什么选择Web Scraper: 第二部分:安装Web Scraper ​​​​​1.打开google浏览器&#xf…

实验六:频域图像增强方法

一、实验目的 熟练掌握频域滤波增强的各类滤波器的原理及实现。分析不同用途的滤波器对频域滤波增强效果的影响,并分析不同的滤波器截止频率对频域滤波增强效果的影响。二、实验原理 ① Butterworth 低通滤波器:一种具有最大平坦通带幅度响应的滤波器。它的特点是在通带内具…