#Uniapp:upx 和 rpx使用区分 设计稿计算规则

upxrpx 区别

  1. upx: upx是uni-app中的长度单位,它代表设备独立像素(与屏幕密度无关),1upx等于设备上的1个物理像素。在不同分辨率和屏幕尺寸的设备上,upx会自动转换为适应当前屏幕的最佳物理像素值,帮助开发者实现跨设备的一致性布局。
  2. rpx: rpx是微信小程序中使用的长度单位,全称为responsive pixel(响应式像素)。同样地,1rpx也代表设备独立像素,在不同分辨率的手机屏幕上能够根据屏幕宽度进行自适应调整。它的设计目的是让开发者可以基于屏幕宽度进行适配,以达到更好的响应式效果。

总结来说,upx和rpx都是为了简化多设备、多屏幕尺寸下的开发工作而提出的相对单位,它们都致力于提供一种跨设备兼容的、与屏幕物理像素无关的布局方式。在uni-app中,你可以使用upx来替代rpx,二者的作用相似。

设计稿计算规则

https://blog.csdn.net/qq_42778001/article/details/103744024

rpx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750rpx。

设计稿 1px / 设计稿准宽度 = 框架样式 1rpx / 750rpx

所以,在实际开发中,1 rpx = 750 * ( 设计稿宽度 / 设计稿基准宽度 )

设计稿的基准宽度为 750px, 有一个红色方块宽度为100px,换算成rpx 结果为:100rpx ,也就是说 1rpx = 1px

750 * 100 / 750
  1. 若设计稿宽度为 750px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 uni-app 里面的宽度应该设为:750 * 100 / 750,结果为:100rpx。
  2. 若设计稿宽度为 640px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 uni-app 里面的宽度应该设为:750 * 100 / 640,结果为:117rpx。
  3. 若设计稿宽度为 375px,元素 B 在设计稿上的宽度为 200px,那么元素 B 在 uni-app 里面的宽度应该设为:750 * 200 / 375,结果为:400rpx。

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

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

相关文章

百家大吉·夕阳关爱——昌岗街微型养老博览会

居民热情参与博览会 为让长者了解及选择适合自己的养老服务,昌岗街在2023年12月27日开展以“百家大吉夕阳关爱”为主题的昌岗街微型养老服务公益博览会活动,通过搭建养老服务机构供需服务平台,拓宽社区长者了解正规养老服务机构的渠道&#…

仿真验证方法(1)——动态验证

一、概述 1.1 验证的目的和方法 在现代集成电路设计中,验证所占工作量超过70%。验证要求真实而完备,它决定了设计的成败与成本。 验证的目的 原始描述是否正确?(代码) 逻辑功能是否正确?(功能…

OpenGl 19高级GLSL

一.GLSL的内建变量 在着色器中,需要当前着色器以外地方的数据的话,必须把数据传进来。之前我们是通过uniform类型和采样器来完成的。之外,GLSL还支持另外几个以gl为前缀的变量,提供更多读写数据的方式,比如说顶点着色…

C语言操作符详解与进制

目录 一:操作符的分类 二:二进制和进制转换 2.1 2进制转10进制 2.1.1 10进制转2进制数字 2.2 2进制转8进制和16进制 2.2.1 2进制转8进制 2.2.2 2进制转16进制 三: 原码、反码、补码 四:移位操作符 4.1左移操作符 4.2 右…

C语言指针(一)

目录 1.什么是指针 2.指针变量和地址 1.解引用操作符 2.指针变量类型的意义 3.void*指针 4.const修饰指针 1.const放在*左边 2.const放在*右边 3.指针的运算 1.指针加减整数 2.指针减指针 3.指针比较大小 4.野指针 1.没有给指针变量初始化 2.指针指向的空间释放 …

XSS的利用(包含:蓝莲花、beef-xss)

0x00、环境搭建 dvwa靶场 操作指南和最佳实践:使用 DVWA 了解如何防止网站漏洞_dvwa源代码-CSDN博客 xss漏洞接收平台 下载:GitHub - firesunCN/BlueLotus_XSSReceiver 将解压后的BlueLotus_XSSReceiver原代码放置 phpstudy 安装目录的WWW文件夹下 访问平台:http://127…

力扣刷题记录(28)LeetCode:797、200、463

797. 所有可能的路径 解题思路&#xff1a;回溯算法&#xff0c;当收集到的路径的最后一个值等于n-1时&#xff0c;收集答案。 参数&#xff1a;图、当前结点 class Solution { public:vector<int> path;vector<vector<int>> ans;void dfs(vector<vector…

企业培训系统源码:构建智能、可扩展的学习平台

企业培训系统在现代企业中扮演着至关重要的角色。本文将通过深度解析企业培训系统的源码&#xff0c;介绍如何构建一个智能、可扩展的学习平台&#xff0c;涉及关键技术和代码实例。 1. 技术栈选择与项目初始化 在构建企业培训系统之前&#xff0c;选择适当的技术栈是至关重…

Linux操作系统----实用工具Git(配实操图)

绪论​ “针对问题 解决问题 针对问题&#xff01;”&#xff0c;本章主要讲解的是Git是什么以及Git的如何搭建仓库和如何在Linux环境下通过指令的形式提交自己的代码到远程仓库。 话不多说安全带系好&#xff0c;发车啦&#xff08;建议电脑观看&#xff09;。 1.Git的来源以…

vulnhub靶场之DC-5

一.环境搭建 1.靶场描述 DC-5 is another purposely built vulnerable lab with the intent of gaining experience in the world of penetration testing. The plan was for DC-5 to kick it up a notch, so this might not be great for beginners, but should be ok for p…

el-select 单选时,选择后输入框的is-focus状态并没有取消

前两天在封装组件的时候&#xff0c;发现el-select 单选时&#xff0c;选择后输入框的is-focus状态并没有取消&#xff0c;需要手动点其它地方才会取消&#xff0c;于是想着找找为什么 一、通过调试源码发现&#xff0c;输入框在点击选项后触发blur&#xff0c;紧接着又触发了…

STM32学习笔记二十一:WS2812制作像素游戏屏-飞行射击游戏(11)探索游戏脚本

还记得上次在第十七章中为BOSS创建的路径动画吧。我们写了一大坨的代码来描述BOSS的运动路径&#xff0c;但凡是写过几年代码的人都不会干出这样的事情。-_-! 没办法&#xff0c;谁叫那时候还没有脚本呢。这章就来补齐这块短板。 脚本属于配置化的一种&#xff0c;你可以把脚…

大模型学习与实践笔记(四)

一、大模型开发范式 RAG&#xff08;Retrieval Augmented Generation&#xff09;检索增强生成&#xff0c;即大模型LLM在回答问题或生成文本时&#xff0c;会先从大量的文档中检索出相关信息&#xff0c;然后基于这些检索出的信息进行回答或生成文本&#xff0c;从而可以提高回…

【实用技巧】Steam Wallpaper Engine 壁纸引擎向手机导入壁纸方法

一、内容简介 本文介绍如何使用电脑上的 Wallpaper Engine &#xff08;Steam 平台中的壁纸引擎&#xff09;向安卓手机导入并使用壁纸。 二、所需原材料 安卓手机&#xff08;以笔者使用的华为荣耀50为例&#xff09;、安装有Steam以及Wallpaper Engine的电脑 三、导入方法…

c++最值查找

目录 min和max函数 min_element和max_element 例 nth_element函数 例 例题 题目描述 输入描述 输出描述 解 min和max函数 只能传入两个值或一个列表 时间复杂度为O(1),数组O(n)&#xff0c;n为元素个数 min_element和max_element min_element(st,ed)返回地址[st,…

Rust 最新版1.75.0升级记

升级方法 稳定版 C:\>rustup update stable info: syncing channel updates for stable-x86_64-pc-windows-msvc info: latest update on 2023-12-28, rust version 1.75.0 (82e1608df 2023-12-21) info: downloading component cargo 5.9 MiB / 5.9 MiB (100 %) 3.…

宏集案例丨宏集PC Runtime软件助推食品行业生产线数字化革新

来源&#xff1a;宏集科技 工业物联网 宏集案例丨宏集PC Runtime软件助推食品行业生产线数字化革新 原文链接&#xff1a;https://mp.weixin.qq.com/s/DwzVzifUiidNr-FT3Zfzpg 欢迎关注虹科&#xff0c;为您提供最新资讯&#xff01; 01 前言 近年来&#xff0c;中国食品行业…

html+css实现子元素完全居中常见方案

详细过程 查看公众号文章 htmlcss实现子元素完全居中常见方案 获取更多内容&#xff0c;请关注微信公众号。搜索“码圈小橙子”&#xff0c;或扫描下方二维码获取关注

FFmpeg编程录制音频(Mac OS)

之前我们使用FFmpeg命令行工具进行了简单的音视频操作&#xff0c;这次在Mac OS环境下编写代码实现简单的音频录制功能。 FFmpeg命令行音频录制 首先回顾一下Mac OS环境下简单的音频录制命令行实现&#xff1a; ffmpeg -f avfoundation -i ":0" -t 20 -acodec pcm…

opencv拉流出现missing picture in access unit with size 4错误解决

0、应用场景问题 我们使用opencv作为拉流客户端&#xff0c;获取画面后进行图像处理并推流&#xff08;使用ffmpeg库&#xff09;。 opencv解码同样使用ffmpeg库。 我们要求opencv能根据业务不断进行拉流操作&#xff0c;等效的逻辑代码如下&#xff1a; while(1) {printf(&…