【uni-app】响应式单位rpx

2023-3-31    前端达人

单位

rpx是响应式px
rpx是一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准,750rpx正好是屏幕的宽度。屏幕变宽,rpx实际显示效果会等比放大,但在App端和h5端,屏幕宽度达到960px时,默认将按照375px的屏幕宽度进行计算。在开发移动端项目时选择rpx作为尺寸单位。
uni-app在App端,H5端和小程序都支持rpx,并且可以配置不同屏幕宽度的计算方式。

页面元素在uni-app的宽度计算公式如下:
750 * 元素在设计稿中的宽度 / 设计稿基准宽度

举例说明:

  1. 若设计稿宽度为750px,元素A在设计稿上的宽度为100rpx, 那么元素A在uni-app中的宽度应该设计为750 * 100/750,即100rpx
  2. 若设计稿宽度为640px,元素A在设计稿上的宽度为100rpx, 那么元素A在uni-app中的宽度应该设计为750 * 100/640,即117rpx
  3. 若设计稿宽度为375px,元素A在设计稿上的宽度为200rpx, 那么元素A在uni-app中的宽度应该设计为750 * 200/375,即117rpx

但是要注意的是

  1. 不要对响应式单位依赖太严重了,比如组件高度或字体大小也使用rpx。只有当你需要某元素的单位要根据屏幕宽度大小变化时,才需要rpx这类动态宽度单位。
  2. 一般情况下高度和字体大小是不应该根据屏幕宽度变化的,除非你的字体大小想根据屏幕宽度变化。
  3. rpx不支持动态横竖屏切换计算,使用rpx建议锁定屏幕方向

拓展:在设置文件mainfest.json里开启px转rpx(默认关闭),所有的px可一键转换为rpx

“transformPx”:false  
        
  • 1

rpx直接支持动态绑定

<view class="test" :style="{width:winWidth + 'rpx;'}"></view> 
        
 
        
  • 1


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作,也请与我们联系01063334945。 

分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

分享本文至:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档