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

萧寂173

于 2024-12-03 16:10:57 发布

阅读量954

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/weixin_68658847/article/details/144217517

版权

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

30 篇文章

订阅专栏

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转rpx
  pxToRpx(px) {
    return px * 750 / wx.getSystemInfoSync().windowWidth;
  },
  // rpx转px
  rpxToPx(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>