Uni-app独自の強力なアダプティブユニットupxですが、これは大きな落とし穴であり、ソリューションとして動的に割り当てることはできません。

uni-app デフォルトのサイズ単位としてupxを使用します。Upxはベース幅を基準にした単位であり、画面の幅に応じて調整できます。uni-app 標準の画面幅は750upxです。

開発者は、デザインドラフトのベース幅からページ要素のupx値を計算できます。デザインドラフト1pxとフレームスタイル1upxの変換式は次のとおりです。

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

例えば：

デザインドラフトの幅が 640pxで、デザインドラフトの要素Aの幅が100pxの場合、uni-app 内部の要素A の幅は ：に750 * 100 / 640設定する必要があり、結果は：117upxになります。
デザインドラフトの幅が375px、デザインドラフトの要素Bの幅が 200pxの場合、uni-app 設定する必要のある幅の要素B ：750 * 200 / 375、結果は：400upxになります。

1.動的バインディング style は直接使用をサポートしていません upx。

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

2.uni.upx2px(Number) 変換を使用した 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>

Uni-app独自の強力なアダプティブユニットupxですが、これは大きな落とし穴であり、ソリューションとして動的に割り当てることはできません。

おすすめ