rem,rpx和px之间的关系
总的来说，rem、rpx和px各有其独特之处，设计师们需要根据项目需求和用户体验优化来巧妙地结合使用，以实现最佳的视觉效果和用户体验。
微信小程序也支持rem尺寸单位，rem和rpx的换算关系：rem： 规定屏幕宽度为20rem；1rem = (750/20)rpx 注：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
一般来说，rem/rpx布局通常用于水平布局，px用于垂直布局。(适用于行布局中的多元素布局)这里以上图为例，因为每个手机屏幕的横向尺寸是固定的。如果使用px，小屏幕的位置可能会失控，导致内容换行混乱。因此，使用rem/rpx单元布局。
设计微信小程序是按照什么尺寸做?
rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
设计小程序上的轮播图的图片是16：9的宽高比例，所以商家在给小程序商城设计轮播图的时候，尽量按照这个尺寸来选择。如果有多张轮播图，建议几张的轮播图的尺寸大小保持一致，这样整体的视觉上看起来就非常美观、整洁。
微信进入小程序的第一个页面，导航区通常只有一个操作——“返回”，即返回进入小程序前的微信页面。 进入小程序后的次级页面，导航区的操作为——“返回” 和“关闭”。 “返回”，即返回上一级小程序界面或微信界面。“关闭”，即在当前界面直接退出小程序，回到进入小程序前的微信页面。
小程序wxss和css的区别
1、为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比，WXSS 扩展的特性有：（1）尺寸单位 （2）样式导入 尺寸单位 rpx（responsive pixel）： 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
2、wxss是微信的CSS。微信用自己的开发语言wxss代替了Web编程中使用的css；实际上，主要的实现思想与Web开发技术基本相同，并且它只是对某些标签的简单替换，其中大部分是原始的CSS，基本上是正确的。它们都是通过调用同一页面来实现的，但是可以说，微信小程序比Web开发更简单，更方便。
3、WXSS与CSS差异： WXSS限制背景图片为外链，使用@import引入外联样式，尺寸单位为rpx，响应屏幕大小。 双向绑定： 小程序需使用setData()更新视图，不同于Vue的直接赋值。 生命周期函数： onLoad加载页面，onShow显示页面，onReady渲染完成，onHide隐藏页面，onUnload卸载页面。
微信小程序安装vant-weapp,将vant的px转成rpx
转换单位：Vant-weapp中的px需要转换为rpx。转换过程如下：检查转换后的wxss文件，所有px已转换为rpx。 在调试器中验证，确认转换已成功完成。
首先，下载Vant Weapp UI组件或其他需要转换的文件，将其放入项目文件结构下的static文件夹中。 然后，通过npm安装px2rpx插件，该插件可辅助完成单位转换。在命令行输入：npm i @megalo/px2rpx。 接下来，打开webpack.dev.conf.js与webpack.prod.conf.js配置文件，将文件中引用代码嵌入。
在开始使用Vant Weapp时，按照官网指导进行安装，首先运行`npm init -y`生成`package.json`，然后安装指定版本的@vant/weapp（这里选择教程中的3）：`npm i @vant/weapp@3 -S --production`。官网未明确指出版本，学习时保持一致性是关键。
在终端输入命令npm i vant-weapp -S --production 在回过头看，在微信小程序开发工具中会多一个文件package.json，在这里面就可以进行包的配置。
