【uni-app】响应式单位rpx

2023-10-26

单位

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

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

举例说明:

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

但是要注意的是

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

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

“transformPx”:false

rpx直接支持动态绑定

<view class="test" :style="{width:winWidth + 'rpx;'}"></view>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【uni-app】响应式单位rpx 的相关文章

随机推荐

  • 服务器显卡驱动重装系统,windows7旗舰版系统重装显卡驱动的方法

    在windows7旗舰版电脑中 我们都是需要安装显卡驱动 但是如果显卡驱动安装不合适的话 就会容易导致电脑出现问题 所以如果有碰到安装到不合适的显卡驱动的话我们可以通过重装显卡驱动来解决 那么该怎么操作呢 为此小编这就给大家讲解一下wind
  • 图片 url blob base64 互转

    待补充 url to blob export const urlToBlob async url string gt return new Promise resolve gt fetch url then res gt res blob
  • Nginx

    HTTP和反向代理web服务器 Nginx是一个高性能的HTTP和反向代理web服务器 同时也提供了IMAP POP3 SMTP服务 Nginx是一款轻量级的Web服务器反向代理服务器及电子邮件 IMAP POP3 代理服务器 nginx反
  • 结合 服务器+后端+前端,完成 vue项目 后台管理系统

    目录 以上是项目的服务器php 后端 前端 已经可以正常运行 一 登录 登录页进度条 戳这里Vue项目电商后台管理系统 nprogress 进度条 活在风浪里的博客 CSDN博客 二 侧导航 三 列表页源码 四 角色分配 五 权限页面开发
  • 多线程实现Runable接口和Callable接口的区别

    先看源码callable接口 返回泛型v 可以抛出异常 Runable接口是抽象方法run 没有返回值 不能抛出异常 有异常在run方法内部处理 总结 区别1 两者最大的区别 实现Callable接口的任务线程能返回执行结果 而实现Runn
  • 交换机电口、光口、网络速率的基本概念总结

    电口和光口 千兆网 万兆网 POE 包转发率 背板带宽 交换容量 光纤跳线 电口和光口 电口 电口也即RJ45口 插双绞线的端口 网线 一般速率为10M或100M 即为百兆工业交换机 部分支持1000M 即为千兆交换机 光口 工业以太网交换
  • python sklearn 梯度下降法_Python与机器学习:梯度下降

    梯度下降 Gradient Descent 梯度下降法不是一个机器学习算法 是一种基于搜索的最优化算法 目的是最小化一个损失函数 同样 梯度上升法用于最大化一个效用函数 求解损失函数的最小值有两种方法 1 正规方程求解 上一章已经讲使用线性
  • java多线程和高并发系列三 & Synchronized锁详解

    目录 设计同步器的意义 如何解决线程并发安全问题 同步器的本质就是加锁 synchronized原理详解 synchronized底层原理 Monitor监视器锁 什么是monitor 对象的内存布局 对象头 对象头分析工具 锁的膨胀升级过
  • Python入门教学——多进程和多线程

    目录 一 线程和进程 1 线程和进程的基本概念 2 线程和进程的关系 3 串行 并行和并发 二 创建多个线程 1 线程相关的模块 2 创建线程 2 1 通过Thread类构造器来创建新线程 2 2 通过继承于Thread类来创建新线程 三
  • Kubernetes 集群使用 NFS 网络文件存储

    文章目录 1 NFS 介绍 2 环境 软件准备 3 Kubernetes HA 集群搭建 4 直接挂载 NFS 5 PV PVC 方式使用 NFS 6 StorageClasses 动态创建 PV 方式使用 NFS 1 NFS 介绍 Kub
  • JDBC实现纵向导出数据库数据

    使用到的技术点 1 Java写文件 2 熟悉JDBC API 3 Java集合ArrayList的使用 4 Java字符串截取 本代码仅供测试 如要使用 需自行增加数据库列类型定义和判定逻辑 DBConnectMySQL java pack
  • 教你如何构建 Linux 内核

    介绍 我不会告诉你怎么在自己的电脑上去构建 安装一个定制化的 Linux 内核 这样的资料太多了 它们会对你有帮助 本文会告诉你当你在内核源码路径里敲下make 时会发生什么 当我刚刚开始学习内核代码时 Makefile 是我打开的第一个文
  • C语言中函数指针、指针函数、结构体中的函数指针的用法和区别

    一 指针函数 定义 指针函数 简单的来说 就是一个返回指针的函数 其本质是一个函数 而该函数的返回值是一个指针 声明格式为 类型标识符 函数名 参数表 这似乎并不难理解 再进一步描述一下 看看下面这个函数声明 int fun int x i
  • OSI七层协议模型及其协议

    文章目录 一 OSI七层模型是什么 其协议有哪些 二 TCP IP四层协议 TCP IP五层协议 OSI七层协议是什么 一 OSI七层模型是什么 其协议有哪些 二 TCP IP四层协议 TCP IP五层协议 OSI七层协议是什么 一 1 O
  • php如何处理高并发请求

    PHP 处理高并发请求的方法 使用异步框架 通过使用异步处理方式 可以有效地降低 PHP 处理请求的响应时间 避免因为 IO 操作而导致的等待阻塞 常用的异步框架有ReactPHP和Swoole等 使用缓存 使用缓存可以减少每个请求都需要访
  • Open3D——RGBD图转化为点云(pcd)并显示

    1 用Open3D分别读取RGB图片和深度图片 彩色图 深度图 2 把Open3D中的RGBD图片转化pcd格式并储存 3 显示点云 直接看代码 Open3D www open3d org The MIT License MIT See l
  • 五款单按键开关机电路图

    转载 https blog csdn net shileiwu0505 article details 114401137 一 单按键开关机电路图 本例电路可实现通过按一次按键S1实现开机 再按一次S1实现关机的功能 整个电路的工作过程 电
  • 详解 TS 中的子类型兼容性

    简介 在写 TypeScript 代码时经常遇到类型检查不通过的问题 这些问题根据编译器给出的错误提示以及修改建议多数可以快速修复 本文讲解的内容是编译器进行类型检查时的兼容性相关检查规则 这些规则在 TypeScript 语言背后默默发挥
  • 刷脸支付用户可以摆脱对手机介质的依赖

    支付宝与微信的刷脸支付设备落地体量约在10万台左右 同时云闪付也在广州 杭州等七个城市陆续上线了 刷脸付 从安装数量看 刷脸设备的总体落地效果理想 现在商家对使用扫码支付服务具有很强的依赖性 且担心刷脸支付因为技术与道德问题而遭遇不必要的麻
  • 【uni-app】响应式单位rpx

    单位 rpx是响应式px rpx是一种根据屏幕宽度自适应的动态单位 以750宽的屏幕为基准 750rpx正好是屏幕的宽度 屏幕变宽 rpx实际显示效果会等比放大 但在App端和h5端 屏幕宽度达到960px时 默认将按照375px的屏幕宽度