uni-app中px與rpx的轉(zhuǎn)換方法
第一種轉(zhuǎn)換方法：
由rpx的微信官方介紹可知
rpx（responsive pixel）: 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。
如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
由此得知是以750物理像素為基準(zhǔn)：
px / rpx = screenWidth / 750
由此得知：
- rpx = (750 px) / screenWidth
- px = (screenWidth rpx) / 750
// rpx轉(zhuǎn)px
rpxToPx(rpx) {
const screenWidth = uni.getSystemInfoSync().screenWidth
return (screenWidth * Number.parseInt(rpx)) / 750
}
// px轉(zhuǎn)rpx
pxToRpx(px) {
const screenWidth = uni.getSystemInfoSync().screenWidth
return (750 * Number.parseInt(px)) / screenWidth
}第二種轉(zhuǎn)換方法：
uniapp 內(nèi)置的轉(zhuǎn)換方法
// rpx轉(zhuǎn)px
rpxToPx(rpx) {
return uni.upx2px(rpx)
}
// px轉(zhuǎn)rpx
pxToRpx(px) {
//計(jì)算比例
let scale = uni.upx2px(100)/100;
return px/scale
},補(bǔ)充：單位轉(zhuǎn)換公式
說了這么一大堆，我們再來看看rpx和px有什么關(guān)系。
rpx單位規(guī)定如果在iPhone6下，也就是屏幕寬度375px，則
- 750rpx = 375px = 750物理像素
- 1rpx = 0.5px = 1物理像素
這也是很多人推薦用iphone6模擬開發(fā)的原因之一，單位轉(zhuǎn)換很直觀，就是2:1，但是不是在所有設(shè)備上都是2:1呢？曾經(jīng)我也是怎么認(rèn)為的，然后老出bug.....，其實(shí)這是有轉(zhuǎn)化公式的，不是簡簡單單的2:1。
總的來說，還是以750這個(gè)物理像素為基準(zhǔn)
px / rpx = screenWidth / 750
然后我們就可以推出：
rpx = (750 * px) / screenWidthpx = (screenWidth * rpx) / 750
// rpx轉(zhuǎn)px
rpxToPx(rpx) {
const screenWidth = uni.getSystemInfoSync().screenWidth
return (screenWidth * Number.parseInt(rpx)) / 750
}
// px轉(zhuǎn)rpx
pxToRpx(px) {
const screenWidth = uni.getSystemInfoSync().screenWidth
return (750 * Number.parseInt(px)) / screenWidth
}
總結(jié)
到此這篇關(guān)于uni-app中px與rpx的轉(zhuǎn)換方法的文章就介紹到這了,更多相關(guān)uni-app px與rpx轉(zhuǎn)換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Layui實(shí)現(xiàn)數(shù)據(jù)表格默認(rèn)全部顯示(不要分頁)
今天小編就為大家分享一篇Layui實(shí)現(xiàn)數(shù)據(jù)表格默認(rèn)全部顯示(不要分頁)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
js操作css屬性實(shí)現(xiàn)div層展開關(guān)閉效果的方法
這篇文章主要介紹了js操作css屬性實(shí)現(xiàn)div層展開關(guān)閉效果的方法,涉及javaScript操作css樣式實(shí)現(xiàn)div彈出層的效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05
這篇文章主要為大家詳細(xì)介紹了用js實(shí)現(xiàn)用戶注冊的簡潔版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
javascript實(shí)現(xiàn)iframe框架延時(shí)加載的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)iframe框架延時(shí)加載的方法,可基于setTimeout實(shí)現(xiàn)這一功能,是非常實(shí)用的技巧,需要的朋友可以參考下2014-10-10
這篇文章主要介紹了JS添加或刪除HTML dom元素的方法,結(jié)合實(shí)例形式分析了javascript針對HTML DOM元素節(jié)點(diǎn)的創(chuàng)建、追加、刪除等相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2019-03-03
selenium 反爬蟲之跳過淘寶滑塊驗(yàn)證功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了selenium 反爬蟲之跳過淘寶滑塊驗(yàn)證功能，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-08
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)登陸與注冊功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
JavaScript檢查數(shù)據(jù)中是否存在相同的元素（兩種方法）
這篇文章主要介紹了JavaScript檢查數(shù)據(jù)中是否存在相同的元素（兩種方法）,需要的朋友可以參考下2018-10-10
javascript基本數(shù)據(jù)類型和轉(zhuǎn)換
本文主要介紹了javascript的基本數(shù)據(jù)類型和轉(zhuǎn)換，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-03-03
js canvas實(shí)現(xiàn)擦除效果示例代碼
擦除效果在我們?nèi)粘ｉ_發(fā)中也是時(shí)有見到的，通過擦除效果大大加強(qiáng)了與用戶的交互性，所以下面這篇文章主要給大家介紹了利用js和canvas實(shí)現(xiàn)擦除效果的相關(guān)資料，文中給出了詳細(xì)的介紹和示例代碼，需要的朋友可以參考借鑒，下面來一起看看吧。2017-04-04