Uni-app's exclusive powerful adaptive unit upx, but this is a big pit, and it cannot be dynamically assigned as a solution.

uni-app Use upx as the default size unit. Upx is a unit relative to the base width and can be adapted according to the screen width. uni-app The standard screen width is 750upx.

Developers can calculate the page element upx value through the base width of the design draft. The conversion formula of design draft 1px and frame style 1upx is as follows:

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

 

for example:

 

1. If the width of the design draft is  640px and the width of element A on the design draft is 100px , then the width of  element A  uni-app inside should be set to :, the750 * 100 / 640 result is: 117upx .
2. If the width of the design draft  375px , element B width in the design draft is  200px , then element B in  uni-app the width which should be set : 750 * 200 / 375, the result is: 400upx .

 

1. The dynamic binding  style does not support direct use  upx.

<!-- - 静态upx赋值生效 -->
<view class="test" style="width:200upx"></view>
<!-- - 动态绑定不生效 -->
<view class="test" :style="{width:winWidth + 'upx;'}"></view>

2.  Assign value after using  uni.upx2px(Number) conversion  px.

<template>
    <view>
        <view class="half-width" :style="{width: halfWidth}">
            半屏宽度
        </view>
    </view>
</template>

<script>
    export default {
        computed: {
            halfWidth() {
                return uni.upx2px(750 / 2) + 'px';
            }
        }
    }
</script>
<style>
    .half-width {
        background-color: #FF3333;
    }
</style>