小程序使用 rpx 单位 转 px的方法(用于动画、canvas画图)
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画图)的更多相关文章
- 微信小程序中rpx与rem单位使用
		
原作者: 小小小 来自: 授权地址 本文讲解rpx和rem应用于微信小程序,如果你还没有入门,建议先从下面看起: 微信小程序官方文档web app变革之remrpx单位官方文档rpx单位基础介绍 ...
 - 微信小程序中显示html富文本的方法
		
微信小程序中显示html富文本的方法 使用方法:git地址:https://github.com/icindy/wxParse 一.下载wxParse文件 二.在要引入的页面的js文件中,引入文件 j ...
 - 小程序--->小程序图片上传阿里OSS使用方法
		
小程序图片上传阿里OSS使用方法 首先看下参考文档 ( http://blog.csdn.net/qq_38125123/article/details/73870667) 这里只将一些运用过程中遇到 ...
 - 【微信小程序】rpx尺寸单位的应用
		
前言:微信小程序中的rpx尺寸单位用起来很方便.他是怎么实现计算的呢?(这里要注意的是,常规浏览器解析css代码的时候会把font-size小于12px的字体转成12px,不会让他小于12px的,而微 ...
 - 【微信小程序】——rpx、px、rem等尺寸间关系浅析
		
最近开发微信小程序,在写样式表的时候发现用PX的效果不太理想,而官方文档用rpx来做响应式布局单位,就仔细研究了下,在此做个小总结: 这里先引用官方定义的尺寸单位‘rpx’:可以根据屏幕宽度进行自适应 ...
 - 微信小程序的尺寸单位rpx介绍
		
rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应. 规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375 ...
 - 微信小程序中的单位
		
vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%. vh:viewpoint height,视窗高度,1vh等于视窗高度的1%. rpx:rpx单位是微信小程序中css的尺寸单 ...
 - 开发微信小程序 中遇到的坑 及解决方法
		
1.wx.request 只能访问 https 解决: 新建项目 不填appid 即可访问 localhost 2.页面中多重三元表达式 解析有问题 解决: <!--{{index}} { ...
 - c语言小程序以及java生成注释文档方法
		
c语言小程序:sizeof和strlen() sizeof运算符以字节为单位给出数据的大小,strlen()函数以字符为单位给出字符串的长度,字符和字节不是一回事. char类型用于存储字母和标点符号 ...
 
随机推荐
- G - Preparing for Exams
			
题目链接: https://vjudge.net/contest/251958#problem/G 具体思路: 圆内四边形内角互补,所以,如图所示. 证明,三角形oda和三角形obc相似. 第一步,角 ...
 - 2017/05/08  java 基础  随笔
			
1.null pointer exception 指针变量obj 没有指向任何空间 你调用它的方法和属性就会出错 2.基本数据类型值传递,不改变原值,调用后就会弹栈,局部变量随时消失 引用数据类型值传 ...
 - opencv入门指南(转载)
			
转载链接:http://blog.csdn.net/morewindows/article/details/8426318 网上的总结的一些用openncv的库来做的事: 下面列出OpenCV入门指南 ...
 - caffe源码阅读(1)_整体框架和简介(摘录)
			
原文链接:https://www.zhihu.com/question/27982282 1.Caffe代码层次.回答里面有人说熟悉Blob,Layer,Net,Solver这样的几大类,我比较赞同. ...
 - (DT系列五)Linux kernel 是怎么将 devicetree中的内容生成plateform_device【转】
			
转自:https://blog.csdn.net/lichengtongxiazai/article/details/38942033 Linux kernel 是怎么将 devicetree中的内容 ...
 - xpath与nodejs解析xml
			
测试xpath的工具 http://www.freeformatter.com/xpath-tester.html#ad-output http://www.xpathtester.com/test ...
 - jdk8系列二、jdk8方法引用、重复注解、更好的类型推断、新增注解
			
一.方法引用 方法引用使得开发者可以直接引用现存的方法.Java类的构造方法或者实例对象.方法引用和Lambda表达式配合使用,使得java类的构造方法看起来紧凑而简洁,没有很多复杂的模板代码. 方法 ...
 - opencv 图像深度(depth)
			
原文地址:http://blog.csdn.net/dingfc/article/details/7457984 图像深度是指存储每个像素所用的位数,也用于量度图像的色彩分辨率.图像深度确定彩色图像的 ...
 - CSS导航条nav简单样式
			
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
 - [HTML]点击按钮,页面总是跳回顶端的解决方法(Clicking an button,always resets the view to top of page)
			
1 前言 当网页页面较长或者表单较多时,右侧会出现滚动条,然而经常会出现点击底部的<button>按钮或者<a>超链接,会出现点击后,当前页面会回到顶端. 2 方案 例如样例代 ...