首页 > 其他分享 >uni-app px与rpx的转换

uni-app px与rpx的转换

时间:2023-03-22 18:11:49浏览次数:58  
标签:rpx app 宽度 uni 屏幕 px

uniapp尺寸单位 px转rpx

uniapp尺寸单位
uni-app 支持的通用 css 单位 包括 px、rpx。
px即屏幕像素
rpx(responsive pixel) 即响应式px,一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准,750rpx恰好为屏幕宽度。屏幕变宽,rpx实际显示效果会等比放大,但在APP端和H5端屏幕宽度达到960px时,默认按照 375px 的屏幕宽度进行计算。

rpx计算配置

 

 

uni-app屏幕基准宽度

uni-app规定屏幕基准宽度为750rpx
开发者可以通过设计稿基准宽度计算页面元素 rpx 值,设计稿 1px 与框架样式 1rpx 转换公式如下:

 

设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750 rpx

HBuilderX 自动转px为rpx
在HBuilderX 【工具】-【设置】-【语言服务配置】中进行配置

uni-app规定屏幕基准宽度为750rpx
如果设计稿的基准宽度为750px,那么这里的值就填写 750 / 750 = 1
如果设计稿的基准宽度为640px,那么这里的值就填写 640 / 750 = 0.8533333333333333
依次类推

 

 

参考资料
uniapp尺寸单位:

https://uniapp.dcloud.io/frame?id=%E5%B0%BA%E5%AF%B8%E5%8D%95%E4%BD%8D

HBuilderX 自动转px为rpx:
https://hx.dcloud.net.cn/Tutorial/settings/px-upx

uni-app rpx计算配置:
https://uniapp.dcloud.io/collocation/pages?id=globalstyle

 

标签:rpx,app,宽度,uni,屏幕,px
From: https://www.cnblogs.com/sttchengfei/p/17244980.html

相关文章

  • AndroidApp加密数据明文抓取测试方法——hook方式
    0x00前言在做移动安全的app渗透或者说移动app的漏洞挖掘时,往往会碰到一种情况:好不容易绕过了app的反抓包机制,通过burp抓到了app传输的数据包,这时想对这部分数据做一些爆......
  • 冰雪旅游app开发-专业软件定制开发平台
    冰雪旅游app开发需要哪些功能?1.酒店预订:用户通过简单搜索、筛选功能,就能够轻松找到所需,并且支持按照折扣、价格等进行排序。2.实时天气预报:实时天气预报对于用户来说也是......
  • 智能手表小程序/APP开发,按需定制开发有保障
    智能手表的应用不单单在只是用来观看时间,还可以在用户的日常生活上进行一定的健康检测,智能提醒等。目前发展前景事非常客观的,那么智能手表小程序/APP开发都需要哪些功能呢?......
  • 盲盒APP开发要留意的重点,让你水到渠成
     说起盲盒想必大家不会感到陌生,这种新兴事物深受广大用户群体的喜爱,一些人为此打算开发一个自己的盲盒APP。这就需要我们在开发过程中留意一些重点,今天名锐讯动为大家介......
  • uniapp中easycom用法详解
    Uniapp中的easycom是一种组件自动注册机制,可以让开发者更加方便地使用和管理组件。下面详细介绍下关于easycom使用方法。什么是easycom?easycom是Uniapp框架提供的一种组......
  • Argon creative-tim UI with create-react-native-app
    ReactNativeElements开发环境&生成项目&虚拟机调试&本地生成APK档&虚拟机运行APK档1.0 Argoncreative-timUIhttps://demos.creative-tim.com/argon-pro-rea......
  • APP脱壳与反编译之初探
    1.安装app将apk文件拖动到安装模拟器里,运行:点击提交,发现报错2.用jadx-1.0.0反编译app需要安装java环境,然后读取app2.apk  3.查看共享路径在电影共享路径里找......
  • APP脱壳与反编译之Android Hook
    实验环境1.安装安卓模拟器 2,安装miniconda3,安装fridapipinstallfridapipinstallfridafrida-tools-ihttps://pypi.mirrors.ustc.edu.cn/simple/frida--ve......
  • 使用百度UNIT搭建智能对话系统_订火车票实例
    今天我们来一个没有代码的教程,无需编程基础也能学会搭建智能对话系统,在学习之前,我们先来了解一下对话系统的专业术语:单轮对话:简单的一问一答,问题可以用一句话来描述,......
  • 踩坑纪实:UnicodeDecodeError: 'utf-8' codec can't decode bytes in position 21-22:
    问题出现过程切换新的服务器之后,使用PyExecJS库报错...ctx=execjs.compile(js_str)version_obj=ctx.eval('exportObj')报错内容:UnicodeDecodeError:'utf-8'co......