uni-app尺寸单位

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

举例说明：

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

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

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

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

使用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> 

注意：应尽量避免将样式写在静态样式中