hbuilderX的upx单位是什么鬼?
uni-app 使用 upx 作為默認(rèn)尺寸單位, upx 是相對(duì)于基準(zhǔn)寬度的單位,可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。uni-app 規(guī)定屏幕基準(zhǔn)寬度750upx。
開發(fā)者可以通過設(shè)計(jì)稿基準(zhǔn)寬度計(jì)算頁面元素 upx 值,設(shè)計(jì)稿 1px 與框架樣式 1upx 轉(zhuǎn)換公式如下:
設(shè)計(jì)稿 1px / 設(shè)計(jì)稿基準(zhǔn)寬度 = 框架樣式 1upx / 750upx
舉例說明:
若設(shè)計(jì)稿寬度為 640px,元素 A 在設(shè)計(jì)稿上的寬度為 100px,那么元素 A 在 uni-app 里面的寬度應(yīng)該設(shè)為:750 * 100 / 640,結(jié)果為:117upx。
若設(shè)計(jì)稿寬度為 375px,元素 B 在設(shè)計(jì)稿上的寬度為 200px,那么元素 B 在 uni-app 里面的寬度應(yīng)該設(shè)為:750 * 200 / 375,結(jié)果為:400upx。
?
1、動(dòng)態(tài)綁定的 style 不支持直接使用 upx。
<!-- - 靜態(tài)upx賦值生效 -->
<view class="test" style="width:200upx"></view>
<!-- - 動(dòng)態(tài)綁定不生效 -->
<view class="test" :style="{width:winWidth + 'upx;'}"></view>
2、使用 uni.upx2px(Number) 轉(zhuǎn)換為 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>
總結(jié)
以上是生活随笔為你收集整理的hbuilderX的upx单位是什么鬼?的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: vue自定义组件 → 场馆预约の小时范围
- 下一篇: 舒工深度解析不规则场地座位二维码生成规则