DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2018-09-11 18:14
  • 更新:2021-01-28 16:12
  • 阅读:21133

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:**动态绑定的 style不支持响应式尺寸单位

<!-- - 静态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尺寸单位,不再根据屏幕宽度自动响应。

6 关注 分享
Trust Neil_HL 5***@qq.com 1***@qq.com sonicsunsky LuxSun

要回复文章请先登录注册

指尖上的代码

指尖上的代码

我看官方uniapp的app里面全是px
2021-01-28 16:12
1***@qq.com

1***@qq.com

我现在用rpx,在H5端圆角,间距这些在不同手机上是不一样的
2020-10-16 09:17
堂吉诃德

堂吉诃德

回复 堂吉诃德 :
我现在想要在:style里面放rpx怎么办?
2020-06-14 16:58
堂吉诃德

堂吉诃德

文中提到的动态绑定不生效可有什么解决办法? 我现在真要做多屏幕适配

<!-- - 动态绑定不生效,此时变成传统css单位 -->
<view class="test" :style="{width:winWidth + 'px;'}"></view>
2020-06-14 15:33
zting590

zting590

请问下图片高度px如何换算为upx
2019-09-17 14:28
1***@163.com

1***@163.com

想问一下upx能不能响应式,怎么在uni-app中实现rem一样的响应式
2019-02-01 17:11
3***@qq.com

3***@qq.com

我想问一下高度的upx该如何换算
2019-01-18 14:00
a***@163.com

a***@163.com

html 网页模式下,如何相应尺寸变化
window.onresize
2018-12-06 12:23
1***@qq.com

1***@qq.com

然后呢?display:block
2018-09-11 20:16