JAVA、PHP、前端、APP、网站开发 - 开发技术学习

开发技术学习 » APP开发 » 微信小程序rpx与px详情

微信小程序rpx与px详情

此文被围观1627日期: 2019-04-03 分类 : APP开发  标签:  ···

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()

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

站点声明:部分内容源自互联网,为传播信息之用,如有侵权,请联系我们删除。

© Copyright 2011-2024 www.kfju.com. All Rights Reserved.
超级字帖 版权所有。蜀ICP备12031064号