微信小程序——获取到px转化为rpx（根据设备宽高动态设置元素宽高）

最新推荐文章于 2025-04-09 15:05:54 发布

鱼丸粗面不要香菜

最新推荐文章于 2025-04-09 15:05:54 发布

阅读量3.8w

点赞数 8

分类专栏：微信小程序文章标签： rpx 小程序

本文链接：https://blog.csdn.net/qq_41080490/article/details/80268298

版权

在项目中需要给一个view标签动态的设置高度

首先，先通过调用wx.getSystemInfo获取设备信息

可以获取的信息如下图
这里写图片描述

wx.getSystemInfo({
  success: function(res) {
    console.log(res.model)
    console.log(res.pixelRatio)
    console.log(res.windowWidth)
    console.log(res.windowHeight)
    console.log(res.language)
    console.log(res.version

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

鱼丸粗面不要香菜

关注关注

8
点赞
踩
21

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【微信小程序】常见问题-尺寸单位转换

墨夶的博客

11-27

2354

在微信小程序开发中，正确理解和使用尺寸单位及其转换方法是非常重要的。通过上述方法，开发者可以轻松地在rpxpxremvw和pt之间进行转换，从而实现更加灵活和响应式的页面布局。希望这些方法能帮助你在开发微信小程序时解决尺寸单位转换的问题。

微信小程序项目快速开发

jimson_zhu的博客

11-03

683

一）何为微信小程序 张小龙说：小程序是一种不需要安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。 小程序能做什么：查天气、查交通、翻译、点餐、娱乐……都可以实现，覆盖了生活的方方面面。 小程序的定位：比网站体验好——可以使用手机原生的底层接口，比如...

3 条评论您还未登录，请先登录后发表或查看评论

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

weixin_45966674的博客

10-12

1582

大家写东西自然还是会比较喜欢用rpx 但是事实证明在js中还是px好用因为很多单位交互的函数还是只返回px单位的。这里我们用wxss 设置元素高度为 300rpx 然后我们js获取px单位高度。我试过一些大差不差一般差距就是2左右如果对精度要求不是特别高可以考虑。但比较是利用屏幕宽度参与的计算有偏差确实也没办法。但是这里我试过很多单位会有一些偏差。个人建议还是直接用px去算确实也不错的。然后用我们刚刚写的函数转rpx。控制台输出就不太准了。

从0到1，手把手教你搭建微信小程序

最新发布

大雨淅淅的博客

04-09

3190

微信小程序开发是一个充满挑战与机遇的领域。从前期的准备工作，到深入理解开发框架，再到一步步实现页面布局、逻辑交互和数据处理，每一个环节都需要我们精心打磨。在开发过程中，我们难免会遇到各种问题，但只要掌握正确的方法，不断积累经验，就能顺利解决。同时，小程序的测试与上线也是至关重要的环节，它确保了小程序能够以最佳状态呈现在用户面前。而优化与推广则是让小程序持续发展、吸引更多用户的关键。通过性能优化，我们可以提升小程序的运行效率和用户体验；通过有效的推广策略，我们可以扩大小程序的知名度和影响力。

微信小程序 实现 px值转为rpx值、rpx值转为px值

weixin_44646763的博客

08-26

3172

微信小程序 实现 px值转为rpx值、rpx值转为px值

小程序获取高度以及单位转换px转rpx

CY_WINT的博客

03-12

909

小程序单位转换 px->rpx rpx->px

微信小程序 动画单位px转rpx

Solitude5309

03-03

827

微信小程序动画像素单位px转rpx rpx单位，它能够自适应不同设备，使开发者设计的样式在不同的设备呈现出相同的效果。但是px就不能自适应，那么它在遇到不同的设备时会呈现出不同的效果，非常影响UI设计。而微信小程序API里的动画使用px做单位的，这时就需要用到px到rpx的转换。最近看网上有许多回答，发现是不全面的。查阅资料发现网上大多数是这样回答的 var rpx = 600; var s...

【微信小程序高频面试题——精选一】

ytfty24124的博客

11-28

7719

uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可以发布到IOS、Android、Web（响应式）、以及各种小程序、快应用等多个平台。

微信小程序复习总结

2302_81909561的博客

04-27

1223

微信小程序简介微信小程序是一种由腾讯开发的应用程序软件，可在微信内直接使用，无需下载和安装。小程序的设计理念是"用完即走，无需安装"，旨在为用户提供轻量级的移动应用体验。通过微信平台提供的接口和工具，开发者可以创建不同类型的小程序，覆盖多个领域，如购物、社交、娱乐等。工具栏：在工具栏中可以实现多种功能，例如账号的切换，模拟区、编辑区、调试区的显示/隐藏，小程序的编译、预览，切换后台，清理缓存等。模拟区：在模拟区中选择模拟手机的类型、显示比例、网络类型后，模拟器中会显示小程序的运行效果。

【微信小程序】第二章---第三章总结

qq_74842025的博客

03-04

605

logs.wxml：定义了三个标签，分别为view，block和text，其中view标签为容器，block用于绑定 logs数组，而text标签用于显示每一条log。project.config.json：项目配置文件，包含项目名称，AppID等相关信息。logs.json：来配置页面title的内容。logs.wxss：对页面样式进行控制。app.wxss：小程序主样式表文件。index.wxss：配置页面样式。logs.js：定义了logs数组。

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

weixin_68658847的博客

12-03

931

【代码】微信小程序px和rpx单位互转方法。

微信小程序 vant 组件库 px 转 rpx

lixianlong1234的博客

08-17

737

微信小程序 vant 组件库 px 转 rpx 适配不同机型

微信小程序px转rpx

weixin_44709338的博客

01-12

313

wx.getSystemInfo获取到的设备数据是px wx.getSystemInfo({ success: res => { let clientWidth = res.windowWidth let changeHeight = 750 / clientWidth this.setData({ changeHeight, //单位系数 }) }, }) ...

微信小程序 px转rpx

qq_30330579的博客

03-06

651

px(rpx) { var px = rpx / 750 * wx.getSystemInfoSync().windowWidth; return px }, wx.getSystemInfoSync() //是获取当前手机信息的api

【微信小程序】px 和 rpx 互换、计算窗口高度

joanmelon的博客

01-24

1904

rpx 转 px 1rpx = 750 / 设备屏幕宽度计算窗口高度。

微信小程序开发 px转换rpx

qwerewf的博客

09-11

2025

前言：最近在编写一个uniapp开源项目时，由于没有UI设计稿就使用浏览器提供的手机调试工具，把项目切换到iphone6作为UI设计稿。大家都知道UI设计师一般都是以750宽度作为视觉稿的标准。接下来先让我们了解一些概念然后再来了解rpx转换px的换算。像素：像素是图像的基本采样单位，它不是一个确定的物理量，因为像素点的物理大小是不确定的。分辨率:分辨率是屏幕像素的数量，一般用屏幕宽度的像素点乘以屏幕高度的像素点。如描述iphone6的分辨率是750*1334。分辨率又分为【物理分辨率】和【逻辑分辨

小程序使用动画时的 px 单位转 rpx的方法

hjh15827475896的博客

12-28

2555

1、需要借助的API：wx.getSystemInfoSync(); 通过API可获取的值： // 在 iPhone6 下运行： var systemInfo = wx.getSystemInfoSync(); console.log(systemInfo.windowWidth); // 输出 375（单位 px） // 在 iPhone6 Plus 下： var systemInf...

微信小程序px和rpx之间的转换

weixin_44714325的博客

09-01

3189

由于在微信小程序中，所有屏幕的宽度均为750rpx，因此可以进行如下转换： rpx转px: var px = rpx / 750 * wx.getSystemInfoSync().windowWidth; px转rpx: var rpx = px * 750 / wx.getSystemInfoSync().windowWidth;