1、需要借助的API:wx.getSystemInfoSync();

通过API可获取的值:

 // 在 iPhone6 下运行:
var systemInfo = wx.getSystemInfoSync();
console.log(systemInfo.windowWidth); // 输出 375(单位 px)
// 在 iPhone6 Plus 下:
var systemInfo = wx.getSystemInfoSync();
console.log(systemInfo.windowWidth); // 输出 414 (单位 px)

2、px与rpx之间转换的公式:px = rpx / 750 * wx.getSystemInfoSync().windowWidth;

 // 假设设计图中按钮向右偏移了300rpx,动画代码如下:
this.animation.translateX(300 / 750 * systemInfo.windowWidth).step()

这样在所有机型上都可以进行适配。

小程序使用 rpx 单位 转 px的方法(用于动画、canvas画图)的更多相关文章

  1. 微信小程序中rpx与rem单位使用

    原作者: 小小小   来自: 授权地址 本文讲解rpx和rem应用于微信小程序,如果你还没有入门,建议先从下面看起: 微信小程序官方文档web app变革之remrpx单位官方文档rpx单位基础介绍 ...

  2. 微信小程序中显示html富文本的方法

    微信小程序中显示html富文本的方法 使用方法:git地址:https://github.com/icindy/wxParse 一.下载wxParse文件 二.在要引入的页面的js文件中,引入文件 j ...

  3. 小程序--->小程序图片上传阿里OSS使用方法

    小程序图片上传阿里OSS使用方法 首先看下参考文档 ( http://blog.csdn.net/qq_38125123/article/details/73870667) 这里只将一些运用过程中遇到 ...

  4. 【微信小程序】rpx尺寸单位的应用

    前言:微信小程序中的rpx尺寸单位用起来很方便.他是怎么实现计算的呢?(这里要注意的是,常规浏览器解析css代码的时候会把font-size小于12px的字体转成12px,不会让他小于12px的,而微 ...

  5. 【微信小程序】——rpx、px、rem等尺寸间关系浅析

    最近开发微信小程序,在写样式表的时候发现用PX的效果不太理想,而官方文档用rpx来做响应式布局单位,就仔细研究了下,在此做个小总结: 这里先引用官方定义的尺寸单位‘rpx’:可以根据屏幕宽度进行自适应 ...

  6. 微信小程序的尺寸单位rpx介绍

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

  7. 微信小程序中的单位

    vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%. vh:viewpoint height,视窗高度,1vh等于视窗高度的1%. rpx:rpx单位是微信小程序中css的尺寸单 ...

  8. 开发微信小程序 中遇到的坑 及解决方法

    1.wx.request 只能访问 https 解决: 新建项目  不填appid  即可访问 localhost 2.页面中多重三元表达式  解析有问题 解决: <!--{{index}} { ...

  9. c语言小程序以及java生成注释文档方法

    c语言小程序:sizeof和strlen() sizeof运算符以字节为单位给出数据的大小,strlen()函数以字符为单位给出字符串的长度,字符和字节不是一回事. char类型用于存储字母和标点符号 ...

随机推荐

  1. android 面试题(一)

    1.Android中真实宽高,getWidth和getMeasuredWidth的区别:哪个计算的是真实的宽? getWidth():得到的是View在父Layout中布局好后的宽度值,如果没有父布局 ...

  2. MFC_CFileDialog_选择单一文件

    场景 选择单一文件 技术点 CFileDialog CFileDialog::CFileDialog( BOOL bOpenFileDialog, LPCTSTR lpszDefExt = NULL, ...

  3. TERMIOS详解【转】

    转自:https://blog.csdn.net/guo_wangwei/article/details/1102931# TERMIOS NAME termios, tcgetattr, tcset ...

  4. Linux Kernel 代码艺术——编译时断言【转】

    转自:http://www.cnblogs.com/hazir/p/static_assert_macro.html 本系列文章主要写我在阅读Linux内核过程中,关注的比较难以理解但又设计巧妙的代码 ...

  5. 整理一下odoo10在windows系统下部署的流程

    odoo10环境搭建 所需依赖: Python3.5 odoo10.0 Node.js PostgreSQL 9.5 PyCharm 专业版 1.首先先安装好Python3.5,并设置好环境变量 2. ...

  6. python中对列表的所有操作方法

    列表: names = ['a','b','c','d'] 1.追加:names.append() >>> names.append('e') >>> names ...

  7. (并发编程)线程 (理论-创建-lock-属性-守护,与进程的对比)

    一.线程理论1.什么是线程   线程指的是一条流水线的工作过程(执行代码)   进程不是执行单位,是资源单位   一个进程内自带一个线程,线程是执行单位 2.进程VS线程    1.同一进程内的线程们 ...

  8. Web Services基础学习(W3C)

    1.Web services 使用 XML 来编解码数据,并使用 SOAP 来传输数据 2.基础的 Web Services 平台是 XML + HTTP. Web services 平台的元素: S ...

  9. Android 图片平铺效果

    我们大家都看过平铺的效果,那么我们都是怎么样才能实现的那,我们其实主要用到的就是api,我们一开始new一个bitmap,就可以了,但是,大家都没有想过,我们还可以用什么方法来做这个事情那,那么我们就 ...

  10. java.lang.NoClassDefFoundError: com/google/inject/Injector

    报错如下: 解决方案: <dependency> <groupId>com.google.inject</groupId> <artifactId>gu ...