小程序使用 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类型用于存储字母和标点符号 ...
随机推荐
- Application生命周期
onCreate 在创建应用程序时创建 onTerminate 当终止应用程序对象时调用,不保证一定被调用,当程序是被内核终止以便为其他应用程序释放资源,那么将不会提醒,并且不调用应用程序的对象的on ...
- Mybatis进阶学习笔记——动态sql
1.if标签 <select id="queryByNameAndTelephone" parameterType="Customer" resultTy ...
- maven私服内容补充
1.添加阿里云中央仓库 注意Download Remote Indexes选项为True 1.登陆nexus私服(默认账号密码:admin/admin123) 2.点击右侧Repositories 3 ...
- 解决kali linux 开启ssh服务后连接不上的问题
今天在手机端装了NetHunter 想连接PC的kali ,可是怎么都连不上 综合网友的经验: 1.修改sshd_config文件,命令为:vi /etc/ssh/sshd_config 将#Pass ...
- C++ socket 传输不同类型数据的四种方式
使用socket传输组织好的不同类型数据,有四种不同的方式(我知道的嘿嘿): a. 结构体 b. Json序列化 c. 类对象 d. protobuf 下面逐一整理一下,方便以后进行项目开发. 1. ...
- [转]GDB-----1.GDB概述
作者: liigo原文链接: http://blog.csdn.net/liigo/archive/2006/01/17/582231.aspx 1.前言 本文写给主要工作在Windows操作系统下而 ...
- ubuntu 里切换 gcc,g++ 的版本
https://askubuntu.com/questions/26498/choose-gcc-and-g-version https://stackoverflow.com/questions/7 ...
- python通过操作windows系统注册表方式修改环境变量
#coding=utf8 import os import sys from subprocess import check_call if sys.hexversion > 0x0300000 ...
- 018_mac写权限的问题
一. 有时候运行一些软件的时候,操作系统下的文件没有写权限.我在使用"HostAdmin App"时碰到了这个问题,google的链接供参考:https://code.google ...
- mtk 无线配置文件生效过程
openwrt 下无线接口的配置文件位于 /etc/config/wirless 中. 启动 /sbin/wifi 脚本后,生效过程如下: (1)通过 uci2dat 工具生成所需要的 .dat文件 ...