眾所周知，px 是乙個叫做畫素的東西，pixel。
畫素是指由影象的小方格組成的，這些小方塊都有乙個明確的位置和被分配的色彩數值，小方格顏色和位置就決定該影象所呈現出來的樣子。
可以將畫素視為整個影象中不可分割的單位或者是元素。不可分割的意思是它不能夠再切割成更小單位抑或是元素，它是以乙個單一顏色的小格存在 [1] 。
每乙個點陣影象包含了一定量的畫素，這些畫素決定影象在螢幕上所呈現的大小。
看一張圖，假設兩者的都是乙個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 的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，這樣就達到了視覺效果。
微信小程式 rpx單位的理解
如何理解rpx？rpx responsive pixel 可以根據螢幕寬度進行自適應。規定螢幕寬為750rpx。如在 iphone6 上，螢幕寬度為375px，共有750個物理畫素，則750rpx 375px 750物理畫素，1rpx 0.5px 1物理畫素。小測試 1 rpx 全稱是什麼？請填寫英...
微信小程式開發 從px到rpx
但是這不是我們要關注的重點。在使用rem時，我們常常讓設計師根據iphone6的標準出設計稿。因為如果以iphone6為標準，並且在iphone6上將fontsize設定成62.5 那麼1rem就等於10px，我們只要將設計師標註的尺寸 一般標註的是物理解析度 除以20就可以得到單位為rem的數值了...
微信小程式引入Vant框架
2.在命令視窗中鍵入npm init。然後所有配置都按預設配置進行，只需點選回車鍵即可。3.在命令視窗中鍵入npm install進行構建，成功之後會在根目錄下生成package.json 和 package lock.json 檔案 4 修改 project.config.json 6.最後我們要...