單位
rpx是響應式px
rpx是一種根據屏幕寬度自適應的動態單位。以750寬的屏幕為基準,750rpx正好是屏幕的寬度。屏幕變寬,rpx實際顯示效果會等比放大,但在App端和h5端,屏幕寬度達到960px時,默認將按照375px的屏幕寬度進行計算。在開發移動端項目時選擇rpx作為尺寸單位。
uni-app在App端,H5端和小程序都支持rpx,并且可以配置不同屏幕寬度的計算方式。
頁面元素在uni-app的寬度計算公式如下:
750 * 元素在設計稿中的寬度 / 設計稿基準寬度
舉例說明:
-
若設計稿寬度為750px,元素A在設計稿上的寬度為100rpx, 那么元素A在uni-app中的寬度應該設計為750 * 100/750,即100rpx
-
若設計稿寬度為640px,元素A在設計稿上的寬度為100rpx, 那么元素A在uni-app中的寬度應該設計為750 * 100/640,即117rpx
-
若設計稿寬度為375px,元素A在設計稿上的寬度為200rpx, 那么元素A在uni-app中的寬度應該設計為750 * 200/375,即117rpx
但是要注意的是
-
不要對響應式單位依賴太嚴重了,比如組件高度或字體大小也使用rpx。只有當你需要某元素的單位要根據屏幕寬度大小變化時,才需要rpx這類動態寬度單位。
-
一般情況下高度和字體大小是不應該根據屏幕寬度變化的,除非你的字體大小想根據屏幕寬度變化。
-
rpx不支持動態橫豎屏切換計算,使用rpx建議鎖定屏幕方向
拓展:在設置文件mainfest.json里開啟px轉rpx(默認關閉),所有的px可一鍵轉換為rpx
“transformPx”:false
rpx直接支持動態綁定
<view class="test" :style="{width:winWidth + 'rpx;'}"></view>