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

news2024/12/25 1:43:03

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

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

pxToRpx(px) {
  //获取整个屏幕的宽度单位 px
  let screenWidth = wx.getSystemInfoSync().screenWidth
  //用整个屏幕的px单位 除以 750
  let 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) {
    //获取整个屏幕的宽度单位 px
    let screenWidth = wx.getSystemInfoSync().screenWidth
    //用整个屏幕的px单位 除以 750
    let ratio = 750 / screenWidth
    //用px单位除以 屏幕比
    return (px * ratio)
  }
});

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

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

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

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

相关文章

libncurses.so.5: cannot open shared object file: No such file or directory解决办法

最近在安装mysql的时候碰到这个问题&#xff0c;由此记录一下 mysql: error while loading shared libraries: libncurses.so.5: cannot open shared object file: No such file or directory解决办法 yum install ncurses-compat-libs

程序员内心独白:注释,爱恨交加,双标难舍

程序员对代码注释可以说是又爱又恨又双标……你是怎么看待程序员不写注释这一事件的呢&#xff1f; 方向一&#xff1a;分享你的观点和故事 对公司好的方面&#xff1a; 从程序员的角度来看&#xff0c;注释对于代码的可读性和可维护性非常重要。注释可以让其他开发者更容易理…

C语言之通讯录的实现篇

目录 test.c 主菜单menu 创建通讯录con 初始化通讯录InitContact 增加个人信息AddContact 展示个人信息ShowContact 删除个人信息DelContact 查找个人信息SearchContact 修改个人信息ModifyContact test.c总代码 contact.h 头文件包含 PeoInfo_个人信息的设置声…

基于PTP的同步时钟同步

基于PTP的同步时钟同步 编辑搜图 请点击输入图片描述&#xff08;最多18字&#xff09; ​本设计采用PTP (Precision Time Protocol)协议&#xff0c;来实现同步时间。PTP是一种精确测量和控制系统的网络协议&#xff0c;用于同步分布式系统中的各种设备和服务器的时间。 首先…

Maxon Cinema 4D 2024:创造无限可能,激发你的创造力

在视觉效果和3D建模领域&#xff0c;Maxon的Cinema 4D一直以其卓越的性能和创新的功能引领着时代潮流。今天&#xff0c;我们很高兴地宣布推出最新版本——Maxon Cinema 4D 2024&#xff08;C4D 2024&#xff09;&#xff0c;它将再次提升行业标准&#xff0c;为设计师提供更强…

SVN提交项目时,出现了这样的提示:“XXX“ is scheduled for addition, but is missing。

原因是&#xff1a;之前用SVN提交过的文件/文件夹&#xff0c;被标记为"addition"状态&#xff0c;等待被加入到仓库。虽然你把这个文件删除了&#xff0c;SVN提交的时候还是会尝试提交这个文件&#xff0c;所以就会提示&#xff1a;"but is missing"。解决…

科技资讯|9月新能源汽车零售74.3万辆,充电桩迎来发展高峰

据中国乘联会发布的初步数据&#xff0c;中国 9 月份乘用车市场零售 202.8 万辆&#xff0c;同比增长 6%&#xff0c;环比增 6%。今年以来&#xff0c;我国乘用车市场累计零售 1,524 万辆&#xff0c;同比增长 2%。 乘联会预计&#xff0c;9 月份新能源车市场零售 74.3 万辆&a…

​电子商务新宠电商独立站成功案例解析|抢占市场巅峰:成功打造日本跨境电商独立站攻略! ​

日本离中国只有690公里&#xff0c;时差仅一个小时。距离和便捷的物流是日本跨境电商最具天然的优势&#xff0c;但除了这种天然优势外&#xff0c;日本还有哪些优势不容忽视&#xff1f;无论是独立站还是乐天、雅虎、日亚&#xff0c;都要遵循一个国家的消费习惯&#xff0c;制…

更新 | 持续开源迅为RK3568驱动指南第十二篇-GPIO子系统

《iTOP-RK3568开发板驱动开发指南》更新&#xff0c;本次更新内容对应的是驱动&#xff08;第十二期_GPIO子系统-全新升级&#xff09;视频&#xff0c;后续资料会不断更新&#xff0c;不断完善&#xff0c;帮助用户快速入门&#xff0c;大大提升研发速度。 文档教程更新至第十…

【翻译】增长秘笈,如何让你的开源项目Star数快速增长

TL;DR &#xff08;前言&#xff09; 本文翻译自 https://star-history.com/blog/playbook-for-more-github-stars&#xff0c;尽可能遵照原文&#xff0c;部分内容做少许改动。 我和我的团队最近推出了一个面向开发者的开源工具。这是我第一次推广一个开源工具。很难找到有意…

ES相关面试问题整理

索引模板了解么 索引模板&#xff0c;一种复用机制&#xff0c;就像一些项目的开发框架如 Laravel 一样&#xff0c;省去了大量的重复&#xff0c;体力劳动。当新建一个 Elasticsearch 索引时&#xff0c;自动匹配模板&#xff0c;完成索引的基础部分搭建。 模板定义&#xf…

印尼封锁TikTok Shop后,数字商业将何去何从?

近年来&#xff0c;TikTok已成为全球范围内备受欢迎的短视频平台&#xff0c;它的崛起改变了用户的娱乐方式&#xff0c;也为商家提供了一个全新的数字营销平台。 然而&#xff0c;最近印尼政府宣布封锁TikTok Shop&#xff0c;理由是平台上存在虚假广告和欺诈行为。这一决定引…

跳槽阿里,面试被虐惨了

1、八股文几乎全背熟&#xff0c;谁能想到最后问的全是JVM&#xff0c;一下给我问懵了&#xff0c;当场就挂了&#xff01; 2、曾经的我很不屑JVM&#xff0c;后来我逐帧学习&#xff01; 3、现在竞争激烈&#xff0c;甭管什么厂&#xff0c;都要问点JVM&#xff01; 最近有…

sonarqube 代码质量检测

官方文档 1.安装 我安装的是 sonarqube-10.2 需要jdk17的环境请先安装 jdk17 下载sonarqube-10.2安装包 直接解压、运行启动脚本 sonarqube-10.2.1.78527\bin\windows-x86-64\StartSonar.batsonarqube访问端口&#xff1a;9000 http://localhost:9000 2.项目改造 2.1 修改…

【TensorFlow2 之011】TF 如何使用数据增强提高模型性能?

一、说明 亮点&#xff1a;在这篇文章中&#xff0c;我们将展示数据增强技术作为提高模型性能的一种方式的好处。当我们没有足够的数据可供使用时&#xff0c;这种方法将非常有益。 教程概述&#xff1a; 无需数据增强的训练什么是数据增强&#xff1f;使用数据增强进行训练可视…

Excel 中使用数据透视图进行数据可视化

使用数据透视表&#xff08;PivotTable&#xff09;是在Excel中进行数据可视化的强大工具。下面将提供详细的步骤来使用数据透视表进行数据可视化。 **步骤一&#xff1a;准备数据** 首先&#xff0c;确保你有一个包含所需数据的Excel表格。数据应该按照一定的结构和格式组织…

4.js中next()方法与prev()方法使用

我们可以选择某个DOM元素进行获取和操作&#xff0c;但是有时候我们在操作某个元素的时候&#xff0c;也要对它相邻的的元素进行获取或是操作&#xff0c;那我们该如何去做呢&#xff0c;今天记录一个获取某个元素的相邻的上一个元素或相邻的下一个元素 js中的next()方法 next…

【HarmonyOS】低代码平台组件拖拽使用技巧之堆叠容器

【关键字】 HarmonyOS、低代码平台、组件拖拽、堆叠组件 1、写在前面 从本篇开始&#xff0c;我们一起来学习一下低代码平台中组件的托拉拽&#xff0c;虽然组件拖拽十分简单&#xff0c;但实际上还是有一定的技巧&#xff0c;新手上路难免会遇到一定的问题&#xff0c;如果能…

Python并行编程之道—加速海量任务同时执行

这次我要和大家分享一种加速海量任务执行的方法&#xff0c;那就是Python并行编程。如果你经常处理大量的任务&#xff0c;并且希望能够同时执行它们以提高效率&#xff0c;那么并行编程将会给你带来巨大的帮助&#xff01; 1、了解并行编程 并行编程是利用多个执行单元同时执…

国产化系统加密/国产化系统防泄密

​深信达网络科技有限公司自主研发的深信达主机加固系统软件V2.0、深信达沙盒防泄密系统软件V5.0&#xff0c;与麒麟软件完成兼容认证&#xff0c;并被纳入麒麟软件安全生态联盟成员之一。 麒麟软件主要面向通用和专用领域打造安全创新操作系统产品和相应解决方案&#xff0c;以…