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. mysql 案例~ 主从复制转化为级联复制

    一 需求 mysql 主从复制切换成级联复制二 核心思想 1 开启级联复制 2 确定postion点场景 A->B A-C 三 切换步骤  1 先确定好B为级联复制库  2 B添加log_upd ...

  2. windows cmd相关操作

    一:文件夹1. 新建文件夹方式一:md[盘符:\][路径\]新目录例如:md c:\test\newtest 方式二:先使用cmd进入需要新建文件的根目录下,使用md或者mkdir 直接创建文件夹ne ...

  3. Linux CentOS 服务器搭建与初始化配置图文详解

    这几天对服务器兴趣贼为浓厚,在虚拟机上装了一个CentOS7玩了玩,遇到过很多问题,比如网卡驱动设置,不能ping 等等问题,然后掏钱买个ECS搭服务器玩玩,下面就开始谢谢我的心路历程吧. 首先 买服 ...

  4. 【学习博客】Python学习初体验

    本周是正式开始学习Python的第一周.很久不写代码了,毕业第5年了,期间几乎没怎么动过手.这段时间比较规律.密集的学习又让我找回了当时的感觉,还不算陌生,我挺喜欢的这种能实实在在看到自己知识增长的状 ...

  5. oracle修改日期格式

    查看默认的日期格式 select * from v$nls_parameters; 更改 alter session | system (范围) set xxxx=“yyyy-mm-dd” ;

  6. ros navigation stack 各个包的作用

    nav_core 该包定义了整个导航系统关键包的接口函数,包括base_global_planner, base_local_planner以及recovery_behavior的接口.里面的函数全是 ...

  7. 驱动开发--【字符设备、块设备简介】【sky原创】

    驱动开发   字符设备,块设备,网络设备   字符设备 以字节流的方式访问, 不能随机访问 有例外,显卡.EEPROM可以随机访问   EEPROM可以擦写1亿次,是一种字符设备,可以随机访问 读写是 ...

  8. springboot系列十三、springboot集成swaggerUI

    一.Swagger介绍 Swagger能成为最受欢迎的REST APIs文档生成工具之一,有以下几个原因: Swagger 可以生成一个具有互动性的API控制台,开发者可以用来快速学习和尝试API. ...

  9. 【转】C/C++内存泄漏及检测

    “该死系统存在内存泄漏问题”,项目中由于各方面因素,总是有人抱怨存在内存泄漏,系统长时间运行之后,可用内存越来越少,甚至导致了某些服务失败.内存泄漏是最难发现的常见错误之一,因为除非用完内存或调用ma ...

  10. oracle 监听 添加ip

    同时修改tnsnames.ora.listener.ora将这两个文件中HOST后面的主机都修改为127.0.0.1然后重启OracleServiceXE.OracleXETNSListener服务 ...