微信小程序-浅谈rpx px rem em

实际工作中设计师常常给的是物理分辨率，程序中用到的是逻辑分辨率。

【物理分辨率】是硬件所支持的分辨率，【逻辑分辨率】是软件可以达到的分辨率

物理分辨率和逻辑分辨率的商称为【像素倍率dpr】，也就是常说的几倍屏。

以iPhone6为例，逻辑分辨率为375*667；物理分辨率为750*1334；像素倍率dpr=2

【rpx 】

rpx其实是微信对于rem的一种应用的规定，或者说一种设计的方案，官方上规定屏幕宽度为20rem，规定屏幕宽为750rpx。是以iPhone6的分辨率（750x1334）为基准划分的。也就是说，在iPhone6上，1rpx=1物理像素=0.5px。

那么1rem=750rpx/20=750/20rpx;

开发者可调用 wx.getSystemInfo 接口，取里面的 windowWidth 或 screenWidth（这两个值一般来说是相同的），取到的值就是屏幕宽度的 px 值。

iphone5	1rpx=320px/750=0.42px
iphone6	1rpx=375px/750=0.5px
iphone6P	1rpx=414px/750=0.552px

【px】

像素px是相对于显示器屏幕分辨率而言的。

【em】

em是相对长度单位。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。10px=0.625em

• em的值并不是固定的；
• em会继承父级元素的字体大小。

【rem】

使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。