uni-app?使用?upx?作為默認尺寸單位田炭,?upx?是相對于基準寬度的單位,可以根據(jù)屏幕寬度進行自適應漓柑。uni-app?規(guī)定屏幕基準寬度750upx教硫。
舉例說明:
若設計稿寬度為?640px叨吮,元素?A?在設計稿上的寬度為?100px,那么元素?A?在uni-app里面的寬度應該設為:750?*?100?/?640瞬矩,結(jié)果為:117upx茶鉴。
若設計稿寬度為?375px,元素?B?在設計稿上的寬度為?200px景用,那么元素?B?在uni-app里面的寬度應該設為:750?*?200?/?375涵叮,結(jié)果為:400upx。
動態(tài)綁定的?style?不支持直接使用?upx丛肢。
<!--?-?靜態(tài)upx賦值生效?-->?<view?class="test"?style="width:200upx"></view>?<!--?-?動態(tài)綁定不生效?-->?<view?class="test"?:style="{width:winWidth?+?'upx;'}"></view>?
使用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>?
注意:應盡量避免將樣式寫在靜態(tài)樣式中