微信小程序px和rpx单位互转方法

js代码如下

Page({data: {width: 0,width2: 0},onLoad: function (options) {let px = this.pxToRpx(380)let rpx = this.rpxToPx(730.7692307692307) // 检查两个互转是否是相同即可,例如pxToRpx(380)转成730.7692307692307 则rpxToPx(730.7692307692307)如果是380则代表互转没问题console.log('px',px); // 750(查看控制台打印,不要查看页面元素,因为页面元素只展示px单位)console.log('rpx',rpx); // 390(查看控制台打印,不要查看页面元素,因为页面元素只展示px单位)this.setData({width: px,  width2: rpx})},// px转rpxpxToRpx(px) {return px * 750 / wx.getSystemInfoSync().windowWidth;},// rpx转pxrpxToPx(rpx) {return rpx / 750 * wx.getSystemInfoSync().windowWidth;}
});

wxml代码如下


<!-- 微信小程序控制台会自动将rpx转成px,会以px单位显示 -->
<view style="width: {{width}}rpx;height: 30px;background-color: pink;margin-top: 200rpx;"></view><view style="width: {{width2}}rpx;height: 30px;background-color: pink;margin-top: 20rpx;"></view>
<!-- 检查一下元素100vw时是否是我们转换出来的像素 -->
<view style="width: 100vw;height: 30px;background-color: pink;margin-top: 20rpx;"></view>

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

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

相关文章

分布式推理框架 xDit

1. xDiT 简介 xDiT 是一个为大规模多 GPU 集群上的 Diffusion Transformers&#xff08;DiTs&#xff09;设计的可扩展推理引擎。它提供了一套高效的并行方法和 GPU 内核加速技术&#xff0c;以满足实时推理需求。 1.1 DiT 和 LLM DiT&#xff08;Diffusion Transformers&am…

JAVA-响应报文转XML

在我们的开发过程中&#xff0c;接口响应一般都是使用的JSON格式&#xff1b;随着我们接入的系统的增加&#xff0c;以及开发需求的增加&#xff0c;不乏出现一些使用XML解析的系统&#xff0c;需要我们将response内容转换成XML的格式响应&#xff0c;那么我们需要对此重新写个…

前端热门面试题目(三)

DIFF算法的原理 DIFF算法用于比较两棵虚拟DOM树的差异并更新真实DOM&#xff0c;其基本原理如下&#xff1a; 分层比较&#xff1a; DIFF算法假设不同层级的节点不会互相影响&#xff0c;因此只比较同一层级的节点&#xff0c;避免全树比较的高成本。 三种操作&#xff1a; D…

资料文件夹转移工具5.2.3 |快速转移到D盘,释放C盘空间

这是一款支持将C盘的常用文件夹转移到其他磁盘分区的工具&#xff0c;提供仅变目录、复制资料和转移资料三种转移方式。该工具完全免费&#xff0c;单文件免安装&#xff0c;大小仅为546KB&#xff0c;非常适合需要释放C盘空间的用户。 大小&#xff1a;546KB 下载地址&#…

xargs命令的基本语法

1. 基本语法 xargs [选项] [命令]-0, --null&#xff1a;使用null字符&#xff08;\0&#xff09;作为输入项的分隔符。这在处理包含空格、换行符等特殊字符的文件名或路径时特别有用。 -I{}&#xff1a;指定替换字符串&#xff0c;其中{}将被替换为输入行的内容。这个选项允…

学习笔记052——Spring Boot 自定义 Starter

文章目录 Spring Boot 自定义 Starter1、自定义一个要装载的项目2、创建属性读取类 ServiceProperties3、创建 Service4、创建自动配置类 AutoConfigration5、创建 spring 工程文件6、将项目打成 jar 包7、jar 打包到本地仓库8、配置application.yml Spring Boot 自定义 Starte…

windows opencv imshow图片报错解决

import cv2# 检查版本 print(cv2.__version__)# 加载一张图片&#xff08;确保你有一个名为test.jpg的文件在当前目录&#xff09; image cv2.imread(C:\\test1.jpg)# 显示图片 cv2.imshow(image, image) cv2.waitKey(0) cv2.destroyAllWindows() cv2意思是opencv c o(*&…

时间序列模型在LSTM中的特征输入

这里写目录标题 前言LSTM的输入组成时间步例子 实际代码解读特征提取处理成dataloader格式&#xff08;用于输入到模型当中&#xff09;对应到lstm的模型创建代码 总结 前言 本文章将帮助理解如何将一个时间序列的各种特征&#xff08;年月日的时间特征&#xff0c;滚动窗口滞…

uniapp 自定义导航栏增加首页按钮,仿微信小程序操作胶囊

实现效果如图 抽成组件navbar.vue&#xff0c;放入分包 <template><view class"header-nav-box":style"{height:Props.imgShow?:statusBarHeightpx,background:Props.imgShow?:Props.bgColor||#ffffff;}"><!-- 是否使用图片背景 false…

node.js基础学习-express框架-静态资源中间件express.static(十一)

前言 在 Node.js 应用中&#xff0c;静态资源是指那些不需要服务器动态处理&#xff0c;直接发送给客户端的文件。常见的静态资源包括 HTML 文件、CSS 样式表、JavaScript 脚本、图片&#xff08;如 JPEG、PNG 等&#xff09;、字体文件和音频、视频文件等。这些文件在服务器端…

下载maven 3.6.3并校验文件做md5或SHA512校验

一、下载Apache Maven 3.6.3 Apache Maven 3.6.3 官方下载链接&#xff1a; 二进制压缩包&#xff08;推荐&#xff09;: ZIP格式: https://archive.apache.org/dist/maven/maven-3/3.6.3/binaries/apache-maven-3.6.3-bin.zipTAR.GZ格式: https://archive.apache.org/dist/…

单片机知识总结(完整)

1、单片机概述 1.1. 单片机的定义与分类 定义&#xff1a; 单片机&#xff08;Microcontroller Unit&#xff0c;简称MCU&#xff09;是一种将微处理器、存储器&#xff08;包括程序存储器和数据存储器&#xff09;、输入/输出接口和其他必要的功能模块集成在单个芯片上的微型…

C# winform非常好用的图表开源控件Scottplot

wifnorm自带的chart控件功能和性能都不太行&#xff0c;所以在网上搜索到了Scottplot开源图表控件。根据自己需要&#xff0c;将已经试验使用过的用法记录在这里 winform建议使用版本 Scottplot包版本&#xff1a;4.1.71 这个版本在winform中可以以控件形式直接拖拉到窗体中使…

Python 3 教程第33篇(MySQL - mysql-connector 驱动)

Python MySQL - mysql-connector 驱动 MySQL 是最流行的关系型数据库管理系统&#xff0c;如果你不熟悉 MySQL&#xff0c;可以阅读我们的 MySQL 教程。 本章节我们为大家介绍使用 mysql-connector 来连接使用 MySQL&#xff0c; mysql-connector 是 MySQL 官方提供的驱动器。…

Gooxi Eagle Stream 2U双路通用服务器:性能强劲 灵活扩展 稳定易用

人工智能的高速发展开启了飞轮效应&#xff0c;实施数字化变革成为了企业的一道“抢答题”和“必答题”&#xff0c;而数据已成为现代企业的命脉。以HPC和AI为代表的新业务就像节节攀高的树梢&#xff0c;象征着业务创新和企业成长。但在树梢之下&#xff0c;真正让企业保持成长…

UICollectionView在xcode16编译闪退问题

使用xcode15运行工程&#xff0c;控制台会出现如下提示&#xff1a; Expected dequeued view to be returned to the collection view in preparation for display. When the collection views data source is asked to provide a view for a given index path, ensure that a …

Gentoo Linux部署LNMP

一、安装nginx 1.gentoo-chxf ~ # emerge -av nginx 提示配置文件需更新 2.gentoo-chxf ~ # etc-update 3.gentoo-chxf ~ # emerge -av nginx 4.查看并启动nginx gentoo-chxf ~ # systemctl status nginx gentoo-chxf ~ # systemctl start nginx gentoo-chxf ~ # syst…

【k8s深入理解之 Scheme 补充-2】理解 register.go 暴露的 AddToScheme 函数

AddToScheme 函数 AddToScheme 就是为了对外暴露&#xff0c;方便别人调用&#xff0c;将当前Group组的信息注册到其 Scheme 中&#xff0c;以便了解该 Group 组的数据结构&#xff0c;用于后续处理 项目版本用途使用场景k8s.io/apiV1注册资源某一外部版本数据结构&#xff0…

CQ 社区版 2024.11 | 新增“审批人组”概念、可通过SQL模式自定义审计图表……

CloudQuery 社区 11 月新版本来啦&#xff01;本月版本依旧是 CUG&#xff08;CloudQuery 用户组&#xff09;尝鲜版的更新。 针对审计模块增加了 SQL 模式自定义审计图表&#xff1b;在流程模块引入了“审批人组”概念。此外&#xff0c;在 SQL 编辑器、连接管理等模块都涉及…

做异端中的异端 -- Emacs裸奔之路4: 你不需要IDE

确切地说&#xff0c;你不需要在IDE里面编写或者阅读代码。 IDE用于Render资源文件比较合适&#xff0c;但处理文本&#xff0c;并不划算。 这的文本文件&#xff0c;包括源代码&#xff0c;配置文件&#xff0c;文档等非二进制文件。 先说说IDE带的便利: 函数或者变量的自动…