uniapp px转rpx适配

作者: 唐_亮 | 来源:发表于2021-03-11 09:59 被阅读0次

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

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

1、安装postcss-pxtorps-pro插件

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

2、在postcss.config.js文件里面加入

require('postcss-pxtorpx-pro'),

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

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

uniapp px转rpx适配
最近做了个小程序的项目之前用的是mpvue，做到一半发现挺多坑的，然后官方也不维护了。就想着换到uniapp。花几...
rpx转px
小程序 wxss 中使用 rpx，而 js 中获取到的值是 px，所以存在rpx 转 px 的问题。以 iPho...
设计图单位转换 - 草稿
uniapp采用750rpx标准屏幕设计，如果设计稿宽度375px ,元素在设计稿宽度100px 也则 750*（...
CSS学习----px、rpx、em、rem、%、vw、vh、v
px 像素，pixel的缩写。作用：px设置固定的布局或者元素大小 rpx rpx (responsive pix...
Flutter 屏幕适配
Flutter屏幕适配可以采用小程序的rpx适配来完成Flutter的适配，比较好理解。 rpx适配原理：不管是...
【uni-app】不同尺寸设计稿，尺寸自动转换
HBuilderX - 偏好设置 - 编辑器配置 - px转rpx/upx比例 750设计稿 - 比例750/75...
Flutter适配方案
1. 使用FittedBox 会根据尺寸自动拉伸内部内容 2. 使用px或rpx进行适配封装工具类封装扩展类d...
微信小程序- wxss
1、单位尺寸屏幕宽度375px,共有750个物理像素，750rpx = 375px = 750物理像素1rpx ...
一分钟告诉你rpx rem 与微信关系
关键之 :px 像素 rpx 微信 rem em 适配开始写这文章，也是这两天遇到了个小问题，网上找了些答案，但...
px与rpx换算
rpx是微信小程序中css的尺寸单位，可以根据屏幕宽度进行自适配。规定屏幕宽度为750px，譬如iphone6，...