微信小程序——px和rpx单位转换

最新推荐文章于 2025-06-03 09:52:59 发布

饼小将

最新推荐文章于 2025-06-03 09:52:59 发布

阅读量1.8k

点赞数 3

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/weixin_44710964/article/details/104462700

微信小程序专栏收录该内容

8 篇文章

订阅专栏

本文介绍了小程序中rpx单位的使用，以及如何通过自定义函数实现rpx与px单位之间的转换，确保组件属性或API在不同屏幕尺寸下正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序新加了rpx这个单位，它可以根据屏幕宽度进行自适应。但是某些组件属性或者api只接收px单位的数字。
文档：
在这里插入图片描述
所以，根据文档规则，我写了个转换函数：

	
	// rpx 转换为 px ，传参类型是数字（Number）
    rpxTorpx(rpx){
        let deviceWidth = wx.getSystemInfoSync().windowWidth;	//获取设备屏幕宽度
        let px = (deviceWidth/750)*Number(rpx);
        return px;
    }
    
    // px 转换为 rpx ，传参类型是数字（Number）
    pxTorpx(px) {
        let deviceWidth = wx.getSystemInfoSync().windowWidth;	//获取设备屏幕宽度
        let rpx = (750 / Number(px)) * deviceWidth;
        return rpx;
    },