关于微信小程序界面适配

众所周知,微信小程序是应用在手机端的,而不同的手机型号,对应的尺寸不同,屏幕适配(基础的响应式布局)是开发过程中必不可少的一个环节
在常用的css代码中,我们默认的使用px作为基础的单位,到了微信小程序肯定是有所不同的
1.我们可以以 rem作为我们的基准单位,详情可见 简书的这一篇
2.使用rpx作为基准单位,也就是说小程序编译后，rpx会做一次px换算。换算是以375个物理像素为基准，也就是在一个宽度为375物理像素的屏幕下，1rpx = 1px.
具体说明,可见微信开放社区原文

然后,为了方便使用 我们这里可以应用 calc() 函数
假设情况 界面宽度未知、有一个元素宽度要求为100px 要求做宽度适配

屏幕适配公式：

     页面宽度 px = 750 rpx
     1 px = 750 rpx /页面宽度
     100 px = 750 rpx * 100 / 界面宽度

我这里不用微信小程序直接编辑,我只在结果中做运行测试,我一般都是在VScode中写代码
这里就需要一个属性 calc 实例 如图的view的宽度 注意 运算符之间、中间不要留空格!