微信小程序使用rpx单位的重要性

ywmadonis

已于 2022-10-19 22:59:16 修改

阅读量1.5k

点赞数 5

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

于 2022-10-19 22:20:24 首次发布

本文链接：https://blog.csdn.net/ywmadonis/article/details/127416993

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在微信小程序的实际开发中，经常会遇到在不同的机型上显示有差异的问题，当然导致的原因有很多。其中rpx单位很是关键，因为微信小程序在设计的时候会考虑各种尺寸的屏幕，所以如果你使用了rpx单位，那么微信小程序在运行的时候会根据不同的机型进行解析，从而做出调整，省去了不少的麻烦。参考如下表：

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

特别是“半路出家”的同学，来了任务直接就做，没有经过系统的学习，可能要吃亏了。笔者就是如此，临时接到开发微信小程序的任务，上来就写代码，页面基本能画出来，功能大部分也能实现，就是bug多。比如小程序在HarmonyOS 和 nexus5 等机型与其它机型会有很大差距。研究很久，查资料，下载教学视频学习，都未能很好解决。

最后发现是因为上面的元素使用了px导致的，如果使用px，微信小程序会失去了一部分的适配功能，所以在各种尺寸的机型上容易出问题，特别是老机型。如下一个三个块定位简单的例子，其中swiper-top的高度单位使用rpx是各机型样式统一的关键：

<view class="container">
   <view class="swiper-top">
        ... ... 
   </view>
   <view class="search-panel">
    ... ... 
    </view>
   <view class="swiper-bottom ">
     ... ... 
   </view>
</view>

.container {
    z-index: 10;
    width: 100vw;
    padding: 15rpx;
    color: #191919;
}
  .swiper-top {
    height: 400px;
    position: relative;
    margin: 0 0 450rpx 0;
    }

.search-panel {
    width: calc(100% - 48px); 
    height: 504rpx; 
    margin: 0 auto; 
    position: absolute; 
    left: 0; 
    top: 400rpx;
    right: 0; 
    bottom: 0;
    box-shadow: 0px 0px 15px #999; 
    border-radius: 15px; 
    z-index: 99;
}
.swiper-bottom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}

还有一个查找教学资源的小插曲，在一个叫《T视频教程》的网站，开通了一个很便宜的会员，分享交流学习技术，结果查了十几个教程资源，只有一个可以下载学习，其它都没有。骗人啊，大家注意了。无论你回复什么内容，过几天都会被改为“资源好”之类的话语。IT视频教程（itspjc.com）这个网站，大家千万别上当！