一,前言
1.在使用uni-app
开发小程序时支持的尺寸单位如下
(1)基础单位:px
, rpx
(2)h5
单位:rem
,vm
,vh
2.rpx
是微信小程序提出的一种响应式px
二,rpx介绍
1.现实情况下,ui
设计师只提供一个分辨率的图,严格按设计图标注的 px
做开发,在不同宽度的手机上界面很容易变形,而且主要是宽度变形。高度一般因为有滚动条,不容易出问题。由此,引发了较强的动态宽度单位需求,从而有了rpx
单位
2.rpx
是相对于基准宽度的单位,可以根据屏幕宽度进行自适应,以 750
宽的屏幕为基准,750rpx
恰好为屏幕宽度,换句话说,在rpx
世界中,屏幕的宽度就是750rpx
三,转化关系
1.为了还原ui
设计稿,我们就得知道ui
设计稿的px
到底等于多少 rpx
,计算公式为:750 * 元素在设计稿中的宽度 / 设计稿基准宽度
-
例如若设计稿宽度为
640px
,元素A
在设计稿上的宽度为100px
,那么元素A
在uni-app
里面的宽度应该设为:750 * 100 / 640
,结果为:117rpx
-
若设计稿宽度为
375px
,元素B
在设计稿上的宽度为200px
,那么元素B
在uni-app
里面的宽度应该设为:750 * 200 / 375
,结果为:400rpx
2.为了方便开发,HBuilderX
提供了自动换算的工具,只需填入1rpx=比例值(px)
即可,公式为 设计稿基准宽度/750
四,注意事项
1.早期uni-app
提供了upx
,目前已改成rpx
文章来源:https://www.toymoban.com/news/detail-460860.html
2.为了方便开发,设计师可以用 iPhone6
作为视觉稿的标准,或者设计宽度为750px
文章来源地址https://www.toymoban.com/news/detail-460860.html
到了这里,关于uni-app css尺寸单位rpx介绍的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!