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. 【python】pip安装报错UnicodeDecodeError: 'ascii' codec can't decode byte 0xc4 in position 7: ordinal not in range(128)

    刚安装完python,准备pip安装第三方库的时候出现了一个错误: UnicodeDecodeError: ‘ascii’ code can’t decode byte 0xef in positio ...

  2. FarBox--另类有趣的网站服务【转】

    FarBox--另类有趣的网站服务 转自:http://mosir.org/html/y2012/the-interesting-web-service-serve-by-FarBox.html 作者 ...

  3. C# .NET Winform等程序一运行就闪退 不同环境 换到其他电脑,例如XP之类的解决方法。

    我现在写标题就跟写tag一样,方便大家索引. 有时候经常会把.NET写的程序拿到其他客户机,发现直接闪退,啥也不报错..那就很蛋疼,又不可能去装IDE来检测是吧,网上还有很多说啥看系统日志的,什么图标 ...

  4. Windows2008 r2 x64下安装FTP工具File Zilla server报错:could not load tls libraries filezilla

    安装file zilla server的时候报错: could not load tls libraries filezilla 搜索了下发现是新版本有这个问题,降低到0.9.43就没这个问题了

  5. Highcharts 使用

    官网:https://www.hcharts.cn/ api:https://api.hcharts.cn/highcharts 效果 html代码 <div id="containe ...

  6. Java编码与乱码问题

    一.为什么要编码? 由于人类的语言太多,因而表示这些语言的符号太多,无法用计算机的一个基本的存储单元----byte来表示,因而必须要经过拆分或一些翻译工作,才能让计算机能理解. byte一个字节即8 ...

  7. 搭建ssh框架项目(四)

    一.创建控制层 (1)创建VO值对象,对应页面表单的属性值 package com.cppdy.ssh.web.form; /** * VO值对象,对应页面表单的属性值 * VO对象与PO对象的关系: ...

  8. three.js 相机camera位置属性设置详解

    开始很懵逼,完全不能理解,有个position,还要up和lookAt干嘛. [黑人问号脸❓❓❓] 既然是位置属性不明白,那默认其它属性都懂了. 上坐标轴: 先来第一个position属性,可以设置x ...

  9. 使用exundelete在Linux下恢复删除的文件

    原文:https://my.oschina.net/looly/blog/261912 Linux下执行 rm 并不会真正删除,而是将inode节点中的扇区删除,同时释放数据块.在数据块被系统重新分配 ...

  10. Lavarel - 模块间复用代码

    代码复用在项目中早晚会遇到,这不在用 Laravel 给博客增加 Feed 订阅功能 就到了需要将生成网页 description 的函数提取出来,在文章显示与 Feed 生成的两个 Controll ...