您现在的位置是:网站首页> 小程序设计
UNI-APP开发之style单位(upx、rpx、vw、vh、px)之间的转换
- 小程序设计
- 2021-05-17
- 1085人已阅读
摘要
1.vw:1vw等于视口宽度的1%。 100vw等于窗口的宽度
2.vh:1vh等于视口高度的1%。 100vh等于窗口的高度
3.vmin:选取vw和vh中最小的那个。
4.vmax:选取vw和vh中最大的那个。
uni-app 使用 upx 作为默认尺寸单位, upx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度750upx。
开发者可以通过设计稿基准宽度计算页面元素 upx 值,设计稿 1px 与框架样式 1upx 转换公式如下:
设计稿 1px / 设计稿基准宽度 = 框架样式 1upx / 750upx
举例说明:
若设计稿宽度为 640px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 uni-app 里面的宽度应该设为:750 * 100 / 640,结果为:117upx。
若设计稿宽度为 375px,元素 B 在设计稿上的宽度为 200px,那么元素 B 在 uni-app 里面的宽度应该设为:750 * 200 / 375,结果为:400upx。
rpx 转 px
var px = uni.upx2px(100);
由于 uniapp 已经有 upx2px 的方法,可以简单的得出反向取值的公式,源码见下方:
// 200 为 px 的值,后面的两个 100 为计算比例使用
var rpx = 200/(uni.upx2px(100)/100);
// 验证上面rpx的值
var px = uni.upx2px(rpx); // px的值 = 200
上一篇:uniapp总结
下一篇:uiniCloud开发