微信小程序——rpxpxrem等尺寸间关系浅析

Posted 2020-08-29 liaofy

最近开发微信小程序，在写样式表的时候发现用PX的效果不太理想，而官方文档用rpx来做响应式布局单位，就仔细研究了下，在此做个小总结：

这里先引用官方定义的尺寸单位‘rpx’：可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

看不懂？没关系，我们接着往下看....

日常开发中，我们常用rem、em来做响应式布局的像素单位，他们都是相对单位。rem相对于文档的根元素，em相对于父元素。

那么问题来了，rpx到底是个啥？又该如何理解“750rpx = 375px = 750物理像素”这句话呢？

开始之前，我们先扯一扯像素、物理长度、设备独立像素、设备独立像素比都是些啥？

【像素】：它不是自然界的物理长度，指基本原色素及其灰度的基本编码。

【物理像素】：它是显示器（电脑、手机屏幕）最小的物理显示单位，每个物理像素由颜色值和亮度值组成。是不是有点眼熟？我们要记住物理像素指的是显示器上最小的点。

【设备独立像素】：它又称密度无关像素，划重点——密度无关，是计算机程序实际处理的虚拟像素（如css的px），由相关关系转化为设备像素。这个相关关系就是指下面要介绍的——设备像素比

【设备像素比】：设备像素比 = 物理像素 / 设备独立像素，单位是dpr！

以iPhone6为例：

已知，1. 设备宽高 375 * 667，在这里我们可以看做是css中的px（密度无关像素）；2. retina屏幕的dpr为2。

求 iPhone6 的物理像素是多少？

送分题啊，同学们！

根据公式，我们计算出iPhone 6 的物理像素为 750 * 1334

结论：

在不同的屏幕上(普通屏幕 vs retina屏幕)，css像素所呈现的大小(物理尺寸)是一致的，不同的是1个css像素所对应的物理像素个数是不一致的。

在普通屏幕下，1个css像素 对应 1个物理像素(1:1)。 在retina 屏幕下，1个css像素对应 2*2个物理像素(1:4)。

【位图像素】：一个位图像素是栅格图像(如：png, jpg, gif等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息(如：显示位置，颜色值，透明度等)。觉得复杂？你只需要记住1px表示一个图片最小的点。不信？我们来用PS放大一张图片，可以看到图片被拆分成无数个点，但无论你如何放大那些小点，他们都不能再次被拆分了，因为他们已经是像素级别的点了，已经是最小的了。

理论上，1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示。

所以，在宽高375 * 667，dpr为2 的 iPhone 6中完美显示200*300(css pixel)img标签，图片的尺寸应该为多少呢？答案是：400 * 600。

这就是我们针对iPhone 6 的设计稿的尺寸基于 750*1334 来设计的目的了。

 

回到正题.......rpx是啥？

 

有了上面的做铺垫，我们知道了对于iPhone6 来说， 1rpx = 1物理像素，1rpx = 0.5px;

如果不是iPhone 6 呢？

1rpx = window.innerWidth/750。

1px = 1rpx * dpr。

 

完......