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>
注意:应尽量避免将样式写在静态样式中