小程序 的 px 转化为rpx

在 获取 屏幕高度 后 ,这个单位是px ,可是我的项目是用rpx,所以这里就涉及一个转化的公式了

1rpx = 750 / 设备屏幕宽度

所以

wx.getSystemInfo({
  success:function (res) {
  console.log(res.windowHeight) // 获取可使用窗口高度
  let windowHeight = (res.windowHeight * (750 / res.windowWidth)); //将高度乘以换算后的该设备的rpx与px的比例
  console.log(windowHeight) //最后获得转化后得rpx单位的窗口高度
  }
})

rpx =   px *(750/res.windowWidth)

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

参考 :https://blog.csdn.net/qq_41080490/article/details/80268298

px 转化 为 rpx的更多相关文章

  1. css中px,em,rem,rpx的区别

    今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...

  2. 小程序使用动画时的 px 单位 转 rpx的方法

    借助API wx.getSystemInfoSync(); 通过API可获取的值: // 在 iPhone6 下运行: var systemInfo = wx.getSystemInfoSync(); ...

  3. Android dp px转化公式

    // DisplayMetrics metrics = getResources().getDisplayMetrics(); // int statusBarHeight = (int) Math. ...

  4. Android系统中的dp和px的转换

    android系统中DP和SP的转化:1.首先分析TypedValue.java 可以调用以下代码获得dp的值 TypedValue.applyDimension(TypedValue.COMPLEX ...

  5. 微信小程序rpx单位

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

  6. 移动端:UI图px单位转换rem单位的计算方法

    简单说一下 em em 单位是相对于父元素字体大小来去定的.比方说: font-size:12px; 元素宽度是2em; 那么实际的宽度是 24px.(具体为什么,可以去查询资料,今天主讲rem) 简 ...

  7. 微信小程序尺寸单位rpx以及样式相关介绍

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

  8. 微信小程序里多出来的奇怪宽度

    最近在看微信小程序相关的东西,写页面的时候,因为一直以Iphone6作为标准调试(微信官方建议以Iphone6调试),下面以实际的案例讲解以rpx会引发的问题 wxml: <view class ...

  9. 浅谈微信小程序

    在如火如荼的互联网技术发展中,各种各样的框架出现,当下最受关注的应该就是微信小程序了.从新闻论坛乃至qq群.微信群,很多很多从事IT工作的朋友喜欢讨论研究这个小程序.带着好奇心,我也参与其中. 第一步 ...

  10. 微信小程序开发技巧及填坑记录

    以下是自己在开发过程中遇到的坑和小技巧,记录以下: 1.出现了 page[pages/XXX/XXX] not found.May be caused by :1. Forgot to add pag ...

随机推荐

  1. 思科数据中心CCIE稳定PASS

    乾颐堂DC数据中心CCIE,在增加新题的情况下一次PASS! 目前笔试.lab都在过人,需要备考的同学联系乾颐堂,机时充足!

  2. Windows Terminal 中 WSL2 默认打开路径

    打开Windows Terminal.鼠标点击进入设置,或者同时按ctrl和逗号.找到如下内容: { "guid": "{07b52e3e-de2c-5db4-bd2d- ...

  3. linux安装Elasticsearch的单节点

    一.基础环境 操作系统环境:Red Hat Enterprise Linux Server release 6.4 (Santiago) ES版本:elasticsearch-7.8.0-linux- ...

  4. LocalDateTime与LocalDate

    时间新特性 新生事物出现,必定是对旧事物的完善或者是缺陷的弥补. 本文章介绍LocalDate.LocalDateTime.在多线程的情况,相比较于Date.Calendar.SimpleDateFo ...

  5. [canvas]ncaught TypeError: Cannot read properties of null (reading 'getContext')

    相信你和我一样是直接复制大佬的js代码(笑) ------------ 主要问题在于:js先加载完了,html才加载,导致js获取不了html的对象 解决办法: 把  <head />  ...

  6. mysql企业常用集群架构

    转自 https://blog.csdn.net/kingice1014/article/details/76020061 1.mysql企业常用集群架构 在中小型互联网的企业中.mysql的集群一般 ...

  7. 第二周day5

    第二周day5,星期五 所花时间:1h 代码量: 搏客量:1 了解到的知识点:学习了安卓的帧布局表格布局和约束布局的相关知识,并完成了对应的习题.

  8. 【小白必经之路:玩转STL】array容器

    此篇随笔将示范array容器的基本操作 1.介绍 array容器在C++普通数组的基础上,添加了一些函数.在使用上,它比普通数组更安全. 2.头文件及命名空间 1 #include<array& ...

  9. java创建对象时内存发生了什么

    Student s = new Student();\ 把Student.class文件加载到内存 在栈内存给s变量开辟一个空间 在堆内存为学生对象申请一个空间 给成员变量进行默认初始化 给成员变量显 ...

  10. R6-1 数字金字塔

    1 void pyramid(int n) 2 { 3 int i, j; 4 5 for(i = 0;i < n;i++){ 6 for(j = 0;j < n - i - 1;j++) ...