随着智能手机的发展，手机设备的宽度也逐渐多元化，这就需要开发者在开发的时候，需要适配不同屏幕宽度的手机。为了解决屏幕适配的问题，微信小程序推出了 rpx 尺寸单位；
rpx：微信小程序新增的自适应单位，可以根据不同设备的屏幕宽度进行自适应缩放；小程序规定任何型号手机屏幕宽度都是 750 rpx；
接下来通过代码验证一下，打开微信开发者工具，在购物车页面编写 rpx 代码：
注意 16 节我们已经使用 Sass 样式，所以这里需要将 cart.wxss 修改为 cart.scss，点击 cart.wxml 文件，删除默认代码，我们下面分别使用 px 和 rpx 实现一个需求：绘制一个盒子，让盒子的宽度占据屏幕的一半；我们对比看一下 px 和 rpx 的效果；
（1）使用 px，选定机型 iphone 6/7/8 plus，该型号的宽度和高度为 414*736，其代码具体实现如下：
这样看着没什么问题，但是当我们切换机型，比如切换到机型 iphone 6/7/8 之后，就会发现宽度不是屏幕的一半，这就是 px 尺寸单位存在的问题：
所以在绘制盒子的时候，不能使用 px 尺寸单位，px 是固定单位，不能实现自适应，需要使用小程序提供的 rpx 尺寸单位；
（2）使用 rpx 来实现需求：绘制一个盒子，让盒子的宽度占据屏幕的一半：
微信小程序规定，不管是什么型号手机，屏幕的宽度都是 750 rpx，因此我们可以在 scss 中修改代码，如下：
可以发现，使用 rpx 之后，不管切换任何机型，盒子的宽度都是屏幕的一半；
开发建议：
- 开发小程序时设计师可以用 iPhone6 作为视觉稿的标准，iPhone6 的设计稿一般是 750 px；
- 如果使用 iPhone6 作为视觉稿的标准，量取多少px，直接写多少 rpx 即可，开发起来方便，也能够适配屏幕的宽度；
设计稿的宽度是 750px，而 iPhone6 的手机设备宽度是 375 px，设计稿想完整展示到手机中，就需要缩小一倍；
在 iPhone6 下，px 和 rpx 的换算关系是：1 rpx = 0.5 px，750 rpx = 375 px，刚好能够填充满整个屏幕的宽度；
参考视频：尚硅谷微信小程序开发