重點:官方推薦使用rpx替代upx,參考:推薦使用rpx替代upx的公告。
- 在普通css寫法里,upx會被編譯器編譯;但動態(tài)綁定時,
upx不能像rpx那樣直接支持動態(tài)綁定,還得再使用uni.upx2px方法用來動態(tài)計算。 - 其他幾家小程序平臺陸續(xù)都兼容了
rpx機制,rpx不再是微信的專用單位,而成為了這個行業(yè)的通用單位。 - 從HBuilderX 2.0.5起,已經支持rpx的正常著色和px2rpx的ide代碼提示轉換功能;官方也修改了uni-app文檔中關于尺寸單位的介紹,不再推薦upx的使用,而推薦rpx。在App端和H5端支持rpx的動態(tài)綁定,實現rpx全端通用。(這個策略調整,不影響開發(fā)者的已有代碼正常運行,開發(fā)者仍然可以使用upx和uni.upx2px,也可以改用rpx,沒有必要批量調整老代碼)
注意:響應式單位upx和rpx是動態(tài)寬度單位
- 很多開發(fā)者對
響應式單位依賴太嚴重了,比如組件高度或字體大小也使用upx/rpx。 - 只有當你需要某元素的單位要根據
屏幕寬度大小變化時,才需要rpx這類動態(tài)寬度單位。 - 一般情況下高度和字體大小是不應該根據屏幕寬度變化的,除非你的字體大小想根據屏幕寬度變化。
拓展:在設置文件mainfest.json里開啟px轉rpx(默認關閉 "transformPx" : false,),所有的px可一鍵轉換為 rpx:

px轉rpx.png