uniapp px转rpx适配

Posted 2023-04-24

参考技术A 最近做了个小程序的项目之前用的是mpvue，做到一半发现挺多坑的，然后官方也不维护了。就想着换到uniapp。花几个小时搬迁到uniapp后发现px的适配出问题了。官方给的方案是：在src-mainfest.json中开启transformPx，试了下发现适配问题更大。

于是在网上找了下方案。最好的方案就是：

npm install postcss-pxtorpx-pro --save-dev

require('postcss-pxtorpx-pro'),

如下。这样就可以适配了。

参考链接：https://blog.csdn.net/weixin_43820866/article/details/114527194

页面适配&swiper图片自适应计算方法

页面适配计算：

假设存在一个设计稿 宽度 xxx 或者 未知page

 1、设计稿存 page在一个元素 宽度100px

 2、拿以上的需求去实现不同宽度的页面适配

 　　page px = 750 rpx

 　　1 px = 750 rpx / page

 　　100px = 750 rpx * 100 /page

 

假设 page = 375px

利用一个属性 calc 属性 css 和 wxss都支持一个用于运算的属性

 　*1、750和rpx中间不要空格

　 *2、运算符的两边也不要留空格

 

swiper图片自适应计算：

　swiper标签存在默认样式

        1 width 100%

        2 height 150px image存在默认宽度和高度320 * 240

        3 swiper 高度无法实现由内容撑开

 

    先找出来原图的宽度和高度 等比例 给swiper定宽度和高度

    eg:原图的宽度和高度520*280px   

 

    swiper 宽度/ swiper 高度 = 原图的宽度 / 原图的高度

 

    swiper高度 = swiper宽度*原图的高度 /原图的宽度

 

    height: 100Vw * 280 / 520

：