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。

<!-- - 靜態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>