uniapp适配解决方法

uni-app的专属强大自适应单位upx,rpx,不能动态赋值解决办法…

uni-app 使用 upx 作为默认尺寸单位, upx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度750upx。

开发者可以通过设计稿基准宽度计算页面元素 upx 值,设计稿 1px 与框架样式 1upx 转换公式如下:
设计稿 1px / 设计稿基准宽度 = 框架样式 1upx / 750upx

举例说明:
若设计稿宽度为 640px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 uni-app 里面的宽度应该设为:750 *100 / 640,结果为:117upx。
若设计稿宽度为 375px,元素 B 在设计稿上的宽度为 200px,那么元素 B 在uni-app 里面的宽度应该设为:750 * 200 / 375,结果为:400upx。

如下图设计稿宽度为1920

在这里插入图片描述
------根据·公式设计稿宽度 / 750 = 比率 则1920/750=2.56 计算出1920宽度设计稿所占标准750百分比------

为了方便在Hbuilder X中 点击工具>设置>语言服务配置中拉到最下面有个px转rpx/upx,把上面计算的比率放进去

在这里插入图片描述
实际效果:

在这里插入图片描述
这样就根据自己输入的px尺寸自动转换为对应的upx尺寸了

选择upx就可以了

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

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

相关文章

无人机之飞行规划与管理篇

无人机飞行规划与管理是确保无人机安全、高效且符合法规的运行的关键步骤。这一过程包括了对飞行任务的详细安排、航线的设定以及风险的评估和管理。下面简述这一过程的主要环节: 一、飞行目的和任务确定 在规划之初,必须明确无人机的飞行目的&#xf…

STM32微控制器在无人机控制中的应用与实践(内附资料)

摘要 无人机技术正迅速发展,STM32微控制器因其高性能和灵活性,成为无人机控制系统的首选平台之一。本文将探讨STM32微控制器在无人机控制中的应用,包括飞行控制、传感器集成、数据通信等方面,同时提供实践代码示例。 1. 无人机控…

微软Win11 24H2七月更新补丁KB5040435发布!附下载

系统之家于7月10日发出最新报道,微软为Win11用户发布了24H2版本七月的最新更新补丁KB5040435。用户升级系统后,会发现版本号升至 26100.1150。此次更新针对远程身份验证拨入用户服务(RADIUS)协议与 MD5冲突等问题进行修复。接下来跟随小编看看此次更新的…

centos安装数据库同步工具sqoop并导入数据,导出数据,添加定时任务

目录 1.安装jdk 1.1上传jdk安装包到/opt目录下并解压 1.2解压 1.3配置环境变量 2.安装hadoop 2.1.下载hadoop 2.2.解压hadoop 2.3配置环境变量 3.安装sqoop 3.1下载 3.2解压 3.3下载依赖包并复制到指定位置 3.3.1下载commons-lang-2.6-bin.tar.gz 3.3.2将mysql-c…

如何在Spring Boot中集成Hibernate

如何在Spring Boot中集成Hibernate 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!今天我们将探讨如何在Spring Boot项目中集成Hibernate。Hibernate是一个广泛…

ComfyUI+MuseV+MuseTalk图片数字人

电脑配置 GPU12G,如果自己电脑配置不够,选择云gpu,我就是用的这个,自己电脑太老配置跟不上 环境: Python 3.11.8 torch 2.2.1 cuda_12.1 资源提供: 链接:https://pan.baidu.com/s/1_idZbF…

Python requests爬虫

Python的requests库是一个强大且易于使用的HTTP库,用于发送HTTP请求和处理响应。它是Python中最受欢迎的网络爬虫框架之一,被广泛用于从网页中提取数据、爬取网站和进行API调用。 使用requests库,你可以轻松地发送各种HTTP请求,包…

YOLOv10改进 | 损失函数篇 | SlideLoss、FocalLoss、VFLoss分类损失函数助力细节涨点(全网最全)

一、本文介绍 本文给大家带来的是分类损失 SlideLoss、VFLoss、FocalLoss损失函数,我们之前看那的那些IoU都是边界框回归损失,和本文的修改内容并不冲突,所以大家可以知道损失函数分为两种一种是分类损失另一种是边界框回归损失,…

DPDK源码分析之(1)libmbuf模块补充

DPDK源码分析之(1)libmbuf模块补充 Author:OnceDay Date:2024年7月2日 漫漫长路,有人对你笑过嘛… 全系列文档可参考专栏:源码分析_Once-Day的博客-CSDN博客 参考文档: DPDK downloadGetting Started Guide for L…

中介子方程五十二

XXFXXaXnXaXXαXLXyXXWXuXeXKXXiXyXΣXXΣXXVXuXhXXWXηXXiXhXXpXiXXpXXbXXpXXiXpXXhXiXXηXWXXhXuXVXXΣXXΣXyXiXXKXeXuXWXXyXLXαXXaXnXaXXFXXaXnXaXXαXLXyXXWXuXeXKXXiXyXΣXXΣXXVXuXhXXWXηXXiXhXXpXiXXpXXbXXpXXiXpXXhXiXXηXWXXhXuXVXXΣXXΣXyXiXXKXeXuXWXXyXLXαXXa…

zabbix服务器运维命令

查看磁盘大小 df -h 看挂载点是/的项目看内存使用大小 free -h查看cpu的大小和负载 top -c查看库大小 mysql -u root -p select table_schema as 数据库, sum(table_rows) as 记录数,sum(truncate(data_length/1024/1024, 2)) as 数据容量(MB), sum(truncate(index_length/…

vue3 开始时间与结束时间比较验证(结束时间需要大于开始时间)

表单项 <el-row><el-col :span"12"><el-form-item label"开始时间" prop"startTime"><el-date-picker clearablev-model"form.startTime"type"date"value-format"YYYY-MM-DD"placeholder&qu…

系统架构设计师教程(清华第2版)<第2章 计算机系统基础知识>解读

系统架构设计师教程 第二章 计算机系统基础知识-2.1计算机系统概述 2.2 计算机硬件 2.1 计算机系统概述2.2 计算机硬件2.2.1 计算机硬件组成2.2.2 处理器2.2.2.1 控制单元(CU)2.2.2.2 算术逻辑单元(ALU)2.2.2.3 指令集2.2.2.3.1 CISC的特点2.2.2.3.2 RISC的特点2.2.3 存储器2.2…

Ollama完整教程:本地LLM管理、WebUI对话、Python/Java客户端API应用

老牛同学在前面有关大模型应用的文章中&#xff0c;多次使用了Ollama来管理和部署本地大模型&#xff08;包括&#xff1a;Qwen2、Llama3、Phi3、Gemma2等&#xff09;&#xff0c;但对Ollama这个非常方便管理本地大模型的软件的介绍却很少。 目前&#xff0c;清华和智谱 AI 联…

Python | Leetcode Python题解之第227题基本计算器II

题目&#xff1a; 题解&#xff1a; class Solution:def calculate(self, s: str) -> int:n len(s)stack []preSign num 0for i in range(n):if s[i] ! and s[i].isdigit():num num * 10 ord(s[i]) - ord(0)if i n - 1 or s[i] in -*/:if preSign :stack.append(…

智能制造热点词汇科普篇——工业微服务

随着互联网技术的不断发展&#xff0c;近十年来&#xff0c;微服务也逐渐走进人们的视线中来。何为微服务&#xff1f;让我们先来看看百度百科上的定义&#xff1a;微服务&#xff08;或称微服务架构&#xff09;是一种云原生架构方法&#xff0c;在单个应用中包含众多松散耦合…

人工智能算法工程师(中级)课程6-sklearn机器学习之聚类问题与代码详解

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下人工智能算法工程师(中级)课程6-sklearn机器学习之聚类问题与代码详解。在机器学习领域&#xff0c;聚类是一种无监督学习方法&#xff0c;旨在将相似的数据点划分为同一类别。sklearn是一个广泛应用于机器学习的Py…

动态引用的艺术:在Postman中实现自动化的终极指南

&#x1f300; 动态引用的艺术&#xff1a;在Postman中实现自动化的终极指南 在API开发和测试中&#xff0c;Postman是一个强大的工具&#xff0c;它提供的动态引用功能可以帮助我们实现自动化和更高效的测试流程。本文将深入探讨如何在Postman中使用动态引用&#xff0c;通过…

vue3 + i18n 中英文切换

第一步&#xff1a;安装vue-i18n npm install vue-i18n 第二步&#xff1a;配置语言包及js文件 目录如下&#xff1a; 英文语言包 en.js // lang/en.js - 英文语言包 export default {menu: { 库房管理: Warehouse Management,入库检测: Incoming Inspection, 设…

华为ensp实现防火墙的区域管理与用户认证

实验环境 基于该总公司内网&#xff0c;实现图片所在要求 后文配置请以本图为准 接口配置与网卡配置 1、创建vlan 2、防火墙g0/0/0与云页面登录 登录admin,密码Admin123&#xff0c;自行更改新密码 更改g0/0/0口ip&#xff0c;敲下命令service-manage all permit 网卡配置…