uni-app css尺寸单位rpx介绍

一,前言

1.在使用uni-app开发小程序时支持的尺寸单位如下

(1)基础单位:pxrpx
(2)h5单位:remvmvh

2.rpx是微信小程序提出的一种响应式px

二,rpx介绍

1.现实情况下,ui设计师只提供一个分辨率的图,严格按设计图标注的 px 做开发,在不同宽度的手机上界面很容易变形,而且主要是宽度变形。高度一般因为有滚动条,不容易出问题。由此,引发了较强的动态宽度单位需求,从而有了rpx单位

2.rpx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应,750 宽的屏幕为基准,750rpx 恰好为屏幕宽度,换句话说,在rpx世界中,屏幕的宽度就是750rpx

三,转化关系

1.为了还原ui设计稿,我们就得知道ui设计稿的px 到底等于多少 rpx,计算公式为:750 * 元素在设计稿中的宽度 / 设计稿基准宽度

  • 例如若设计稿宽度为 640px,元素 A 在设计稿上的宽度为 100px,那么元素 Auni-app
    里面的宽度应该设为:750 * 100 / 640,结果为:117rpx

  • 若设计稿宽度为 375px,元素 B 在设计稿上的宽度为 200px,那么元素 Buni-app 里面的宽度应该设为:750 * 200 / 375,结果为:400rpx

2.为了方便开发,HBuilderX 提供了自动换算的工具,只需填入1rpx=比例值(px) 即可,公式为 设计稿基准宽度/750
在这里插入图片描述

四,注意事项

1.早期uni-app提供了upx,目前已改成rpx

2.为了方便开发,设计师可以用 iPhone6 作为视觉稿的标准,或者设计宽度为750px

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值