uni-app 尺寸单位更改及历史版本兼容说明
uni-app 尺寸单位更改及历史版本兼容说明
注意:本文仅对使用过HBuilderX 0.1.45-48的用户有意义,集中在2018年8月。之后的用户无需关心此文。
自HBuilderX 0.1.49 之后创建的uni-app项目,使用 rpx(upx) 作为响应式尺寸单位,rpx 可以根据屏幕宽度进行自适应;在新创建的uni-app项目中,px 是传统css尺寸单位。
但历史版本的uni-app曾使用 px 作为响应式尺寸单位(作用同 rpx ),uni-app 框架保留了对历史创建项目的向下兼容,开发者可按如下方式维护升级历史项目。
方案1:继续保留 px 为响应式尺寸单位
uni-app 历史项目可以继续将 px 作为响应式尺寸单位,继续之前的尺寸换算,框架会自动处理。
Tips 1:
<!-- - 静态px赋值,此时为响应式单位 -->
<view class="test" style="width:200px"></view>
<!-- - 动态绑定不生效,此时变成传统css单位 -->
<view class="test" :style="{width:winWidth + 'px;'}"></view>
Tips 2: 若在历史项目中引入了使用px作为传统css尺寸单位的的示例组件,比如 hello uni-app 中新增的 多列选择、联动选择示例(含城市选择),则会导致同一项目中,px既作为响应式尺寸单位,又作为传统css尺寸单位,导致混乱,此时建议按照如下方案2的步骤,将历史项目的px升级替换为rpx(注意更改manifest.json文件),然后再引入使用px作为传统css尺寸单位的的示例组件
方案2:使用 rpx 作为响应式尺寸单位
开发者可以按如下步骤将 px 升级为 rpx:
- 全局搜索 px 替换为 rpx
- 在manifest.json根节点下,增加"transformPx":false
注意:如此替换升级后,px 恢复为传统的css尺寸单位,不再根据屏幕宽度自动响应。
在uni-app中,尺寸单位的处理对于跨平台开发至关重要。为了应对不同屏幕尺寸和设备分辨率,uni-app提供了一系列内置的单位,如px
(像素)、rpx
(响应式像素)、vw
(视窗宽度百分比)、vh
(视窗高度百分比)等。下面我将展示如何更改尺寸单位以及如何在历史版本中保持兼容性的代码案例。
尺寸单位更改
1. 使用rpx
进行响应式设计
rpx
是uni-app中最常用的响应式单位,它可以根据屏幕宽度自动缩放。例如,在750rpx宽度的屏幕上,750rpx等于屏幕宽度,而在375rpx宽度的屏幕上,750rpx则等于屏幕宽度的两倍。
<view style="width: 750rpx; height: 100rpx; background-color: red;"></view>
2. 使用vw
和vh
进行视窗百分比设计
vw
和vh
分别表示视窗宽度和高度的百分比,适用于需要精确控制元素大小的情况。
<view style="width: 50vw; height: 50vh; background-color: blue;"></view>
3. 使用px
进行固定尺寸设计
px
是固定的像素单位,不随屏幕尺寸变化。但在不同设备上显示效果可能不同。
<view style="width: 100px; height: 50px; background-color: green;"></view>
历史版本兼容说明
为了确保在不同版本的uni-app中保持兼容性,以下是一些实践建议:
1. 使用条件编译
条件编译可以根据不同的平台或版本编译不同的代码。例如,你可以为旧版本uni-app编写特定的样式。
<!-- #ifdef OLD_VERSION -->
<view style="width: 375px; /* 使用px作为兼容方案 */ height: 50px; background-color: yellow;"></view>
<!-- #endif -->
<!-- #ifndef OLD_VERSION -->
<view style="width: 750rpx; height: 100rpx; background-color: yellow;"></view>
<!-- #endif -->
2. 使用CSS变量和预处理器
通过CSS变量和预处理器(如Sass、Less)可以更方便地管理不同版本的样式。
:root {
--main-width: 750rpx; // 默认使用rpx
@if ($uni-app-version < 3.0) { // 假设3.0版本前需要兼容
--main-width: 375px; // 旧版本使用px
}
}
view {
width: var(--main-width);
height: 100rpx;
background-color: purple;
}
注意:上述Sass代码仅为示例,实际中需要根据uni-app的版本检测机制进行调整。由于uni-app本身不直接支持Sass的条件编译语法,你可能需要在构建过程中通过脚本或其他方式实现版本检测。
通过上述方法,你可以在uni-app中灵活地更改尺寸单位,并确保在不同历史版本间保持兼容性。