前言
衆所周知，px 是一個叫做像素的東西，pixel。
像素是指由圖像的小方格組成的，這些小方塊都有一個明確的位置和被分配的色彩數值，小方格顏色和位置就決定該圖像所呈現出來的樣子。
可以將像素視爲整個圖像中不可分割的單位或者是元素。不可分割的意思是它不能夠再切割成更小單位抑或是元素，它是以一個單一顏色的小格存在 [1] 。
每一個點陣圖像包含了一定量的像素，這些像素決定圖像在屏幕上所呈現的大小。
好的，明白了什麼是像素的話，那麼可以看下爲什麼rpx出現了。
正文
看一張圖，假設兩者的都是一個50px的div，那麼顯示效果如下:
我們看到他們大小都不一致，大的反而更小，這是爲啥子呢?
首先像素不像素人民是不知道，人類看到的是肯定是cm。
在此之前呢，我們應該瞭解一些概念:
物理像素：
物理像素（分辨率）是指設備屏幕實際擁有的像素點。比如iPhone 6的屏幕在寬度方向有750個像素點，高度方向有1334個像素點，所以iPhone 6 總共有750*1334個物理像素。
同一個設備的物理像素是固定的，這是廠商在出廠時就設置好了的。
這個物理像素就很好理解了。
那麼邏輯像素呢?
比如說iphone6，把屏幕的邏輯像素寬度設置爲了375px,物理的其實可以隨便設置。
那麼有另外一個概念，就是像素比，也就是：
設備像素比（Device Pixel Ratio, DPR）：一個設備的物理像素與邏輯像素之比
設備像素比 (dpr)＝ 物理像素(dp) / 設備獨立像素(dip)
在Retina屏的iphone上，devicePixelRatio的值爲2，也就是說1個css像素相當於2個物理像素。通常所說的二倍屏(retina)的dpr是2, 三倍屏是3。
iphone6的尺寸：138.3 毫米 (5.44 英寸)×67.1 毫米 (2.64 英寸)×7.1 毫米 (0.28 英寸)
這裏iphone6 的375px 其實就是把67.1分成了375份，然後50px，得到的寬度爲：50/375*67.1。
好的在這裏就解釋了爲什麼大屏幕顯示更小的問題。
而在一臺手機上，人們關注的是比例問題。
在這裏，50/375的比例明顯大於50/1080的比例。
那麼這時候就可以通過rpx來解決比例問題。
用iphone 6來舉例，其寬度爲邏輯像素爲375px，而rpx 是把屏幕分成750rpx，那麼1rpx=375/750=0.5px;
那麼再回頭來看比例問題,假設都是50rpx，那麼比例都是50/750，這樣就達到了視覺效果。
