uni-app 样式单位 upx

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> 
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容