在 uniapp 中 一键转换单位 (px 转 rpx)

在 uniapp 中 一键转换单位 px 转 rpx

  • [Uni-app 官方转换位置](#Uni-app 官方转换位置)
  • [利用【px2rpx】插件`Ctrl + S`一键全部转换](#利用【px2rpx】插件Ctrl + S一键全部转换)

Uni-app 官方转换位置

首先在App.vue中输入这个:

jsx 复制代码
uni.getSystemInfo({
	success(res) {
		console.log("屏幕宽度", res.screenWidth) //屏幕宽度
		const myrpx = res.screenWidth / 750 * 1
		console.log("myrpx", myrpx);
	}
});

得到转换单位:

然后在偏好设置中设置:

但是需要注意的是,这个不是严格安装这个来计算的

例如我在figma中选择390宽度的画布,但是如果安装计算转换比例应该是:0.52,但是0.52是这个效果:

因此我调整比例为0.58,效果就好很多了

所以你把这个当作一个比例工具就好啦

利用【px2rpx】插件Ctrl + S一键全部转换

你可以下载这个插件,我看有很多人在这个插件底下问这个插件如何自己设定转换值,可以参考如下:

下载插件

px2rpx

注意,这个插件是在你Ctrl+s时才会给你自动将整个页面单位转换

修改插件

首先在package.json中修改模式显示名称:

然后再extension.js中修改单位数值转换规则

最后重启HbuildX,可以发现:


| ✍️ 作者:ZouYu
| 🤳 微信号:19973318795

相关推荐
火眼金睛记单词1 小时前
零基础成人重拾英语:第一个月的30天行动地图
前端·经验分享·学习·小程序
ljt27249606611 小时前
Vue笔记(十二)--mitt
前端·笔记
传人once13 小时前
页面中心圆圈放大效果如何写
开发语言·javascript·ecmascript
用户0333074139514 小时前
TypeScript using 与 AsyncDisposableStack:在真实服务端代码中协调多资源清理
前端
daisychey14 小时前
用 Playwright 做多平台内容分发,我踩过的 8 个坑
前端
IT_陈寒15 小时前
为什么你应该学习JavaScript?
前端·人工智能·后端
大龄秃头程序员15 小时前
iOS冷启动监控Demo
前端
光影少年15 小时前
为什么 JavaScript 中 0.1 + 0.2 !== 0.3,如何让其相等?
前端·javascript·算法
掘金酱16 小时前
[稀土掘金 × 火山引擎] AI用量周榜冲刺赛|获奖名单公示
前端·人工智能·后端
泡泡oO16 小时前
“如果你还在用Superpowers,那我不要和你说话”
前端·后端·全栈