微信小程序 js中写一个px单位转rpx单位的函数

大家写东西自然还是会比较喜欢用rpx 但是 事实证明 在js中 还是px好用 因为很多单位交互的函数还是只返回px单位的

理论上将 750 rpx 是整个屏幕的宽度
那么 我们可以这样写一个函数

pxToRpx(px) {//获取整个屏幕的宽度单位 pxlet screenWidth = wx.getSystemInfoSync().screenWidth//用整个屏幕的px单位 除以 750let ratio = 750 / screenWidth//用px单位除以 屏幕比return (px * ratio)
}

这里 我们看看效果
wxml

<view ><view id = "dom"></view>
</view>

wxss

#dom{width: 750rpx;height: 300rpx;display: block;background-color: brown;
}

js

Page({data: {},onLoad: function () {const query = wx.createSelectorQuery()query.select('#dom').boundingClientRect()query.exec((res) => {console.log(this.pxToRpx(res[0].height))});},pxToRpx(px) {//获取整个屏幕的宽度单位 pxlet screenWidth = wx.getSystemInfoSync().screenWidth//用整个屏幕的px单位 除以 750let ratio = 750 / screenWidth//用px单位除以 屏幕比return (px * ratio)}
});

这里 我们用wxss 设置元素高度为 300rpx 然后 我们js获取px单位 高度
然后用我们刚刚写的函数转rpx
控制台输出如下
在这里插入图片描述
但是这里我试过 很多单位会有一些偏差
例如 这里我们改成 453
在这里插入图片描述
控制台输出就不太准了
在这里插入图片描述
我试过一些 大差不差 一般差距就是2左右 如果对精度要求不是特别高可以考虑
但 比较是利用屏幕宽度参与的计算 有偏差确实也没办法

个人建议还是直接用px去算确实也不错的

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

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

相关文章

Linux 回顾总结

学习前提&#xff08;环境搭建&#xff09;&#xff1a;RHCSA Linux环境搭建-CSDN博客 目录 一、shell 二、文件 三、用户和组管理 四、权限 五、软件 六、网络 七、磁盘 一、shell Linux的操作界面常称为Shell&#xff0c;Shell是操作系统提供给用户使用的界面&#xf…

土壤水分烘干法流程

土壤水分烘干法流程 叠小盒子装土 对折 得到一个正方形&#xff0c;裁掉多余的。然后将正方形按如下形式折 再次对折 然后再展开&#xff0c;对着折痕&#xff0c;竖立起盒子边缘 把上面的尖角翻下来 最后将多余的长条裁出一个盒子底部大小的小方块&#xff0c;放入盒子…

几种常见算法模式与场景应用

在计算机科学中&#xff0c;算法是解决问题的步骤和策略的集合。许多问题都可以通过使用算法解决&#xff0c;这些算法在解决问题的过程中会展现出一些共性和模式。以下是几种常见的算法模式以及它们在场景中的应用&#xff1a; 分治法 (Divide and Conquer) 分治法是一种将问题…

在Vue+Ts+Vite项目中如何配置别名指向不同的目录并引用

在VueTsVite项目中如何配置别名指向不同的目录并引用 vite.config.ts配置如下&#xff1a;tsconfig.json中需要配置baseUrl和paths,如下所示&#xff1a;项目中直接引入案例&#xff1a; vite.config.ts配置如下&#xff1a; import { defineConfig, AliasOptions } from vite…

绘制X-Bar-S和X-Bar-R图,监测过程,计算CPK过程能力指数

X-Bar-S图和X-Bar-R图是统计质量控制中常用的两种控制图&#xff0c;用于监测过程的稳定性和一致性。它们的主要区别在于如何计算和呈现数据的变化以及所关注的问题类型。 X-Bar-S图&#xff08;平均值与标准偏差图&#xff09;&#xff1a; X-Bar代表样本均值&#xff0c;S代表…

路由高级特性

项目拓扑与项目需求 项目需求 某企业网络使用ospf和isis作为IGP协议实现内部网络的互联互通&#xff0c;区域规划和IP规划如图所示&#xff0c;现在要求实现如下需求&#xff1a; LSW1和AR1使用vlan10互联&#xff0c;与AR2使用vlan20互联&#xff0c;LSW1与LSW2、3、4之间使…

spring boot RabbitMq基础教程

RabbitMq 由于RabbitMQ采用了AMQP协议&#xff0c;因此它具备跨语言的特性。任何语言只要遵循AMQP协议收发消息&#xff0c;都可以与RabbitMQ交互。并且RabbitMQ官方也提供了各种不同语言的客户端。 但是&#xff0c;RabbitMQ官方提供的Java客户端编码相对复杂&#xff0c;一般…

将vue项目打包成安卓app

目标&#xff1a;将vue项目打包成安卓app 工具&#xff1a;HbuilderX 1.在HbuilderX中创建一个 5App 项目 创建好的app项目目录 2.将vue项目打包 2.1 在 vue.config.js 中添加公共路径&#xff08;解决打包后的app图片不显示问题&#xff09; module.exports defineConfig(…

深入了解线程:并发编程的核心要点和应用

什么是线程&#xff1f; 线程&#xff08;Thread&#xff09;是计算机科学中的一个基本概念&#xff0c;它是进程内的执行单元。线程是操作系统或进程内部的轻量级执行流&#xff0c;具有独立的程序计数器&#xff08;PC&#xff09;和栈&#xff0c;但共享相同进程的资源&…

Python高效实现网站数据挖掘

在当今互联网时代&#xff0c;SEO对于网站的成功至关重要。而Python爬虫作为一种强大的工具&#xff0c;为网站SEO带来了革命性的改变。通过利用Python爬虫&#xff0c;我们可以高效地实现网站数据挖掘和关键词分析&#xff0c;从而优化网站的SEO策略。本文将为您详细介绍如何利…

新风机缺点有哪些?

虽然新风机在提供新鲜空气和改善室内空气质量方面有很多优点&#xff0c;但它也存在一些缺点。下面列举几个常见的新风机缺点&#xff1a; 安装成本较高&#xff1a;新风机需要通过管道连接室内和室外&#xff0c;需要对房屋进行改造和安装。这可能会增加一些额外的安装成本&am…

代码随想录算法训练营第六十二、六十三天 | 单调栈 part 2 | 503.下一个更大元素II 、42. 接雨水、84.柱状图中最大的矩形

目录 503.下一个更大元素II思路代码 42. 接雨水思路一 双指针思路二 单调栈代码 84.柱状图中最大的矩形思路一 双指针思路二 单调栈代码 503.下一个更大元素II Leetcode 思路 将数组乘2来遍历即可&#xff0c;就是加长版的每日温度。 但是处理起来会有细节&#xff0c;如果…

JAVA学习第一天,java的运行方式

对未来很迷茫&#xff0c;不知道以后能出去干什么&#xff0c;好像掌握的东西很少&#xff0c;从今天开始学习学习java吧&#xff0c;让自己充实起来&#xff0c;记录一下。 jav…

Maven系列第6篇:生命周期和插件详解?

maven系列目标&#xff1a;从入门开始开始掌握一个高级开发所需要的maven技能。 这是maven系列第6篇。 整个maven系列的内容前后是有依赖的&#xff0c;如果之前没有接触过maven&#xff0c;建议从第一篇看起&#xff0c;本文尾部有maven完整系列的连接。 前面我们使用maven…

刷新页面,数据丢失

刷新页面数据丢失原因很多&#xff0c;其中有一种是解析错误&#xff0c;没有解构出来。 报错内容如下(类似这个报错)&#xff1a; 数据结构如下&#xff1a; this.$router.push({name: DetailComparison,query: {rowDetail: rowDetail || null} }) 修改数据结构&#xff1a…

OpenAI科学家谈GPT-4的潜力与挑战

OpenAI Research Scientist Hyung Won Chung 在首尔国立大学发表的一场演讲。 模型足够大&#xff0c;某些能力才会显现&#xff0c;GPT-4 即将超越拐点并在其能力上实现显着跳跃。GPT-3 和 GPT-4 之间的能力仍然存在显着差距&#xff0c;并且尝试弥合与当前模型的差距可能是无…

使用eBPF加速阿里云服务网格ASM

背景 随着云原生应用架构的快速发展&#xff0c;微服务架构已经成为了构建现代应用的主要方式之一。而在微服务架构中&#xff0c;服务间的通信变得至关重要。为了实现弹性和可伸缩性&#xff0c;许多组织开始采用服务网格技术来管理服务之间的通信。 Istio作为目前最受欢迎的…

C++基础之类二(类的实例化,This指针)

目录 类的实例化 概念 类和对象的区别 计算一个类 不同的类的大小 类的存储模型 内存对齐 让结构体按照指定的默认对齐数进行对齐 确定偏移量 大小端字节序 This指针 概念 this指针四大特性 一些关于this指针的问题 总结 之前学过了类&#xff0c;但在编程中类无法直接使用&…

鼎鑫鸿鄴利用国家的策略优势和满足全球需求并驾齐驱

随着全球对可再生能源的需求不断增长&#xff0c;鼎鑫鸿鄴新能源科技有限公司正充分利用中国政府的策略优势&#xff0c;积极满足全球能源使用需求&#xff0c;并在可再生能源领域崭露头角。中国属于全球最大的太阳能市场&#xff0c;在技术研发、产能建设和市场规模等方面拥有…

[Spring] SpringMVC 简介(一)

目录 一、SpringMVC 简介 1、什么是 MVC 2、什么是 SpringMVC 3、SpringMVC 实现原理 4、SpringMVC 的特点 二、简单案例 1、引入依赖 2、在 web.xml 中配置前端控制器 DispatcherServlet 3、创建 SpringMVC 的配置文件 4、创建请求控制器 5、测试页面 6、访问不到 …