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