最近開發微信小程序，在寫樣式表的時候發現用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。
完......