PHP技术,PHP研究及学习,Python学习,人工智能,大数据服务

PHP+Python » 微信小程序 » 微信小程序rpx与px详情

微信小程序rpx与px详情

此文被围观45日期: 2019-04-03 分类 : 微信小程序  标签:  ···

rpx是微信对于rem的一种应用的规定

官方上规定屏幕宽度为20rem,规定屏幕宽为750rpx。

所以在微信小程序中1rem=750/20rpx。

因为如果以iphone6为标准,并且在iphone6上将fontsize设置成62.5%。

那么1rem就等于10px,我们只要将设计师标注的尺寸(一般标注的是物理分辨率)除以20就可以得到单位为rem的数值了。

1rpx = 0.5px = 1物理像素。

rpx称为相对像素值,rpx与物理像素也并非绝对的一比一关系。

wxss将设备宽定义为750rpx,是以iPhone6的分辨率(750x1334)为基准划分的。

将rpx转化px

// 在 iPhone6 下运行: 

var systemInfo = wx.getSystemInfoSync(); 

console.log(systemInfo.windowWidth); // 输出 375(单位 px) 

// 在 iPhone6 Plus 下: 

var systemInfo = wx.getSystemInfoSync(); 

console.log(systemInfo.windowWidth); // 输出 414 (单位 px)

//假设我想向右平移300rpx,动画代码如下: 

this.animation.translateX(300 / 750 * systemInfo.windowWidth).step()

这样在所有机型上都可以进行适配。

本站使用ThinkPHP框架开发读图网主题,目前托管在阿里云,图片由读图网提供. 蜀ICP备12031064号

Copyright © 2011-2019adophper.com All Rights Reserved.