uni-app的专属强大自适应单位upx，但是这个这是一个大坑，不能动态赋值解决办法...

uni-app 使用 upx 作为默认尺寸单位， upx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度750upx。

开发者可以通过设计稿基准宽度计算页面元素 upx 值，设计稿 1px 与框架样式 1upx 转换公式如下：

设计稿 1px / 设计稿基准宽度 = 框架样式 1upx / 750upx

 

举例说明：

 

1. 若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 640，结果为：117upx。
2. 若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 uni-app 里面的宽度应该设为：750 * 200 / 375，结果为：400upx。

 

1、动态绑定的 style 不支持直接使用 upx。

class="test" style="width:200upx">>  class="test" :style="{width:winWidth + 'upx;'}">>

2、使用 uni.upx2px(Number) 转换为 px 后再赋值。

> > class="half-width" :style="{width: halfWidth}"> 半屏宽度 > > > > export default { computed: { halfWidth() { return uni.upx2px(750 / 2) + 'px'; } } } > > .half-width { background-color: #FF3333; } >

 

转载于:https://www.cnblogs.com/putao1/p/10141875.html