前言

  • 微信小程序使用的是rpx
  • 不管屏幕宽度是多少,将宽度划分成750份,1份就是1rpx

获取屏幕真实的宽度

wx.getSystemInfoSync().windowWidth

rpx和px转换公式

1rpx = (屏幕实际宽度/750)px

1rpx = (wx.getSystemInfoSync().windowWidth/750)px

rpx和px转换公式为:

rpx单位数值 * wx.getSystemInfoSync().windowWidth/750 -> px单位数值

举例:将48rpx转化为px单位数值

let pxValue = 48 * wx.getSystemInfoSync().windowWidth/750;

参考

https://blog.csdn.net/smlljet/article/details/90787152

微信小程序 rpx和px转换相关推荐

  1. 微信小程序rpx与px如何换算

    rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应. 规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375 ...

  2. 微信小程序 - rpx和px互转,以及系统给的 pixelRatio 值比例不对

    rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应. 规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则 750rpx = 37 ...

  3. 微信小程序rpx和px的换算

    rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应. 规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375 ...

  4. 小程序rpx和px转换之间的bug

    场景:自己写swiper功能的组件 616rpx,在iPhone5之类非750rpx屏宽的设备上,转换时出现小数 这时微信默认进行向下取值 比如:262.89px取值为262px 但倘若为:-262. ...

  5. 微信小程序rpx和px互转

    rpx转px: var px = rpx / 750 * wx.getSystemInfoSync().windowWidth; px转rpx: var rpx = px * 750 / wx.get ...

  6. 微信小程序 尺寸单位px与rpx之间的转换(入门篇)

    1.rpx:微信小程序中的尺寸单位rpx(responsive pixel):可以根据屏幕宽度进行自适应.规定屏幕宽度为750rpx. 微信官方建议视觉稿以iphone6为标准. 2.个人示例测试: ...

  7. 微信小程序rpx作为高度单位时,在 ios 出现异常

    前言 调试基础库 2.12.0 微信开发者工具 1.03.2008270 uniapp 开发者工具 HBuilderX 2.9.8 ios 上元素高度出现异常 通过微信开发者工具预览无问题. 安卓真机 ...

  8. 微信小程序css单位,微信小程序 rpx 尺寸单位详细介绍

    微信小程序最近火了,大家开发微信小程序有没有注意微信小程序对手机屏幕的要求或者影响呢,面对不同的手机屏幕,微信 rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应, 微信小程序 ...

  9. 简洁UI好玩的文字转换emoji表情微信小程序支持句子词语转换_源码

    介绍: 支持自定义文字输入,支持随机切换,支持句子转换: 用emoji来做暗语啥的是不是很刺激,反正至于怎么玩就看各位的脑洞了~~ 这款小程序安装方法简单,无需服务器域名与合法域名!! 直接使用微信开 ...

最新文章

  1. 开发日记-20190903 关键词 C程序gcc编译过程
  2. n-sphere计算方法-
  3. 《Java核心技术 卷Ⅱ 高级特性(原书第10版)》一导读
  4. hdu 5273(递推)
  5. 推荐一简单易用的脑图制作工具
  6. Codeforces Round #494 (Div. 3) D. Coins and Queries(贪心
  7. Linux进阶之Linux中的标准输入输出
  8. Windows Server 2008 R2入门之FTP服务器
  9. (20191123)matlab绘制指定数值的等高线并添加标注+Matlab绘制平行x或y轴或任意直线
  10. 《Linux私房菜》——一、linux基础整理
  11. 巧用腾讯文档把pdf免费转word方法
  12. linux脚本菜鸟教程,菜鸟教程之shell _1
  13. DAVE笔记--Micrium uc-Probo DashBoard调试
  14. Halcon提取中心线
  15. Matlab之生成间距向量函数linspace和logspace
  16. [深入理解Android卷二 全文-第四章]深入理解PackageManagerService
  17. STM32复习笔记(五) —— GPIO锁定机制
  18. xiuno论坛开发模式怎么调整
  19. 手把手教你搭APM之Skywalking搭建指南(支持Java/C#/Node.js)
  20. 线路/信道编码技术(1)——8B/10B编码

热门文章

  1. 细数你不得不知的容器安全工具
  2. Redis安装及主从配置
  3. 【转】无法登陆SQL server 服务器的解决办法
  4. Apriori算法进行关联分析(2)
  5. 分布式事务最终一致性常用方案
  6. Windows 8 IIS中配置PHP运行环境的方法
  7. Sql语句里的递归查询
  8. 日志插件 log4net 的使用
  9. 警告:Your CPU supports instructions that this TensorFlow binary was not compiled to use: AVX2 FMA(亲测)
  10. 双十一临近,怎样让买家流畅地秒杀? ——腾讯WeTest独家开放电商产品压测服务