欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

uni-app中px與rpx的轉(zhuǎn)換方法

 更新時(shí)間：2023年10月20日 09:55:53   作者：卿本無(wú)憂  
這篇文章主要給大家介紹了關(guān)于uni-app中px與rpx的轉(zhuǎn)換方法,rpx單位最初由微信推出,它與我們常用px一個(gè)很大的區(qū)別就是具有響應(yīng)式,需要的朋友可以參考下

第一種轉(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ǔ)充：?jiǎn)挝晦D(zhuǎn)換公式

說了這么一大堆，我們?cè)賮?lái)看看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)化公式的，不是簡(jiǎn)簡(jiǎn)單單的2:1。

總的來(lái)說，還是以750這個(gè)物理像素為基準(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
}

總結(jié) 

到此這篇關(guān)于uni-app中px與rpx的轉(zhuǎn)換方法的文章就介紹到這了,更多相關(guān)uni-app px與rpx轉(zhuǎn)換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論