前言
隨著web前端技術的飛速發(fā)展雳窟，出現(xiàn)了越來越多的元素單位供大家選擇和使用尊浪，如%、vw封救、vh拇涤、px、em誉结、rem等等鹅士，筆者認為rem已經(jīng)是前端使用的頻率較高的自適應單位了，然而近幾年又流行了rpx和upx單位惩坑。本文簡單介紹px與rpx掉盅，px與upx之間的轉換也拜。
px與rpx
rpx單位是微信小程序中css的尺寸單位，rpx會根據(jù)屏幕分辨率調(diào)整元素尺寸趾痘，可以根據(jù)屏幕寬度進行自適應慢哈。
微信小程序規(guī)定屏幕的基準寬度為750rpx。
假設設計稿尺寸為640px扼脐，我們需要構建一個寬為100px的div，則我們可以設置其width = 750rpx * 100 / 640 = 117.1875rpx奋刽。
顯然瓦侮，當我們把設計稿尺寸設置為750px時，很容易進行px與rpx的換算佣谐，即1rpx = 1px 肚吏。要得到100px的寬度，可以直接寫width:100rpx狭魂。
px與upx
uni-app 使用 upx 作為默認尺寸單位罚攀， upx 是相對于基準寬度的單位，可以根據(jù)屏幕寬度進行自適應雌澄。uni-app 規(guī)定屏幕基準寬度750upx斋泄。
開發(fā)者可以通過設計稿基準寬度計算頁面元素 upx 值，設計稿 1px 與框架樣式 1upx 轉換公式如下：
設計稿 1px / 設計稿基準寬度 = 框架樣式 1upx / 750upx
舉例說明：
若設計稿寬度為 640px镐牺，元素 A 在設計稿上的寬度為 100px炫掐，那么元素 A 在 uni-app 里面的寬度應該設為：750 * 100 / 640，結果為：117upx睬涧。
若設計稿寬度為 375px募胃，元素 B 在設計稿上的寬度為 200px，那么元素 B 在 uni-app 里面的寬度應該設為：750 * 200 / 375畦浓，結果為：400upx痹束。
綜上，很顯然當我們把設計稿尺寸設計為750px時讶请，1px = 1upx祷嘶。
rpx與upx
根據(jù)上述的換算，不難發(fā)現(xiàn)夺溢，rpx和upx貌似沒有什么差異抹蚀。
upx在2018年就推出了，其初衷是為了讓微信的rpx機制可以跨全端使用企垦。
在普通css寫法里环壤，upx會被編譯器編譯。但動態(tài)綁定時钞诡，upx無法被準確編譯郑现，此時官方（此處及下文中提及的官方均指代uniapp官方）提出了使用uni.upx2px()方法湃崩，用來動態(tài)計算。
后來其他幾家小程序平臺陸續(xù)都兼容了rpx機制接箫，rpx不再是微信的專用單位攒读，而成為了這個行業(yè)的通用單位。
最近官方收到很多開發(fā)小程序的用戶投訴upx不能像rpx那樣直接支持動態(tài)綁定辛友，還得再使用uni.upx2px方法薄扁。
官方反思了策略，既然微信不可能支持upx的動態(tài)綁定废累，不如我們在App端和H5端來支持rpx的動態(tài)綁定邓梅。這樣rpx就可以全端通用，且支持動態(tài)綁定邑滨，不再需要uni.upx2px方法日缨。
從HBuilderX 2.0.5起，已經(jīng)支持rpx的正常著色和px2rpx的ide代碼提示轉換功能掖看。
官方也修改了uni-app文檔中關于尺寸單位的介紹匣距，不再推薦upx的使用，而推薦rpx哎壳。
這個策略調(diào)整毅待，不影響開發(fā)者的已有代碼正常運行。
開發(fā)者仍然可以使用upx和uni.upx2px归榕，也可以改用rpx恩静，都可以。沒有必要批量調(diào)整老代碼蹲坷。但新開發(fā)還是應該使用rpx驶乾。
