大家寫東西自然還是會比較喜歡用rpx 但是 事實證明 在js中 還是px好用 因為很多單位交互的函數(shù)還是只返回px單位的
理論上將 750 rpx 是整個屏幕的寬度
那么 我們可以這樣寫一個函數(shù)
pxToRpx(px) {
//獲取整個屏幕的寬度單位 px
let screenWidth = wx.getSystemInfoSync().screenWidth
//用整個屏幕的px單位 除以 750
let ratio = 750 / screenWidth
//用px單位除以 屏幕比
return (px * ratio)
}
這里 我們看看效果
wxml
<view >
<view id = "dom"></view>
</view>
wxss
#dom{
width: 750rpx;
height: 300rpx;
display: block;
background-color: brown;
}
js
Page({
data: {
},
onLoad: function () {
const query = wx.createSelectorQuery()
query.select('#dom').boundingClientRect()
query.exec((res) => {
console.log(this.pxToRpx(res[0].height))
});
},
pxToRpx(px) {
//獲取整個屏幕的寬度單位 px
let screenWidth = wx.getSystemInfoSync().screenWidth
//用整個屏幕的px單位 除以 750
let ratio = 750 / screenWidth
//用px單位除以 屏幕比
return (px * ratio)
}
});
這里 我們用wxss 設(shè)置元素高度為 300rpx 然后 我們js獲取px單位 高度
然后用我們剛剛寫的函數(shù)轉(zhuǎn)rpx
控制臺輸出如下
但是這里我試過 很多單位會有一些偏差
例如 這里我們改成 453
控制臺輸出就不太準(zhǔn)了
我試過一些 大差不差 一般差距就是2左右 如果對精度要求不是特別高可以考慮
但 比較是利用屏幕寬度參與的計算 有偏差確實也沒辦法文章來源：http://www.zghlxwxcb.cn/news/detail-716625.html
個人建議還是直接用px去算確實也不錯的文章來源地址http://www.zghlxwxcb.cn/news/detail-716625.html
到了這里，關(guān)于微信小程序 js中寫一個px單位轉(zhuǎn)rpx單位的函數(shù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
