小程序使用 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类型用于存储字母和标点符号 ...
随机推荐
- linux下比较两个文本文件的不同——diff命令
1>Diff命令的功能Linux中Diff命令的功能为逐行比较两个文本文件,列出其不同之处.它对给出的文件进行系统的检查,并显示出两个文件中所有不同的行,不要求事先对文件进行排序. 2>语 ...
- 爬虫之验证码IP攻防心得——小总结
小前言: 一般来说,现在很多平台注册.登录的时候会涉及到验证码,这样做的目的是为了防止恶意程序恶意访问,从而给服务器造成一定的压力,会浪费一定的资源,大家也都知道,现在这种短信平台,邮箱平台等都是收费 ...
- SVM实例及Matlab代码
******************************************************** ***数据集下载地址 :http://pan.baidu.com/s/1geb8CQf ...
- Delphi中的动态包,有详细建立包的步骤(答案很简单:因为包的功能强大)
为什么要使用包? 答案很简单:因为包的功能强大.设计期包(design-time package)简化了自定义组件的发布和安装:而运行期包(run-time package)则更是给传统的程序设计注入 ...
- Python3学习笔记18-访问限制
在Class内部,可以有属性和方法,而外部代码可以通过直接调用实例变量的方法来操作数据,这样,就隐藏了内部的复杂逻辑. 但是,从Student类的定义来看,外部代码还是可以自由地修改一个实例的name ...
- 对WinMain程序入口函数返回值为msg.wParam的几点理解
原文地址:http://blog.csdn.net/setflvet/article/details/6983224 1.在WinMain主函数中,最后的返回值是msg.wParam,这个参数是传递给 ...
- javaScript——原型继承四步曲
<script> //js模拟类的创建以及继承 //第一步:创建父类 function Parent(name){ this.name = name; } //给父类添加属性方法 Pare ...
- zabbix系列(九)zabbix3.0实现自动触发zabbix-agent端shell脚本任务
zabbix实现自动触发远程脚本执行命令 Zabbix触发器(trigger)达到阀值后会有动作(action)执行:发送告警信息或执行远程命令 环境 Server:基于centos6.5 final ...
- Android Studio gradle配置详解
android gradle配置详解 AppExtension类及其属性 可能大部分人看到AppExtension类会感觉到非常的陌生,其实我们在app中的build.gradle中填写配置信息的时候 ...
- node调试工具--nodemon