uni-app
使用 upx 做为默认尺寸单位, upx 是相对于基准宽度的单位,能够根据屏幕宽度进行自适应。uni-app
规定屏幕基准宽度750upx。html
开发者能够经过设计稿基准宽度计算页面元素 upx 值,设计稿 1px 与框架样式 1upx 转换公式以下:app
设计稿 1px / 设计稿基准宽度 = 框架样式 1upx / 750upx
框架
举例说明:spa
uni-app
里面的宽度应该设为:750 * 100 / 640
,结果为:117upx。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
后再赋值。code
<template> <view> <view :style="{width: h_Width}"> </view> </view> </template> <script> export default { computed: { h_Width() { return uni.upx2px(750 / 2) + 'px'; } } } </script>