uni-app之響應式單位upx和rpx

重點:官方推薦使用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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • uni-app跨平臺框架官方教程 鏈接:https://ke.qq.com/course/343370 一、框架簡...
    Neyo_涼閱讀 36,672評論 0 43
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 14,204評論 1 92
  • Swift1> Swift和OC的區(qū)別1.1> Swift沒有地址/指針的概念1.2> 泛型1.3> 類型嚴謹 對...
    cosWriter閱讀 11,694評論 1 32
  • 上一篇我們講了uni-app的各種優(yōu)缺點,接下來我們要講一下uni-app的開發(fā)流程和一些常用組件。此篇文章為un...
    任建堃閱讀 19,633評論 0 28
  • uni-app使用upx作為默認尺寸單位,upx是相對于基準寬度的單位,可以根據屏幕寬度進行自適應。uni-app...
    遙啊遙啊遙啊閱讀 46,897評論 1 9

友情鏈接更多精彩內容