小程序怎么做自適應(yīng)各種手機(jī)尺寸

最新消息顯示，我們可以看到很多小程序界面，一些動(dòng)畫，畫布無(wú)法在不同分辨率手機(jī)上實(shí)現(xiàn)自適應(yīng)，下面小編就為大家解答小程序怎么做自適應(yīng)各種手機(jī)尺寸

解決的問題： 畫布，動(dòng)畫等js里面的操作，默認(rèn)是px而不是rpx, 無(wú)法根據(jù)手機(jī)屏幕自適應(yīng)

達(dá)到的效果： 讓畫布，動(dòng)畫在不同分辨率的手機(jī)上實(shí)現(xiàn)rpx的自適應(yīng)

實(shí)現(xiàn)思路，獲取組件節(jié)點(diǎn)的寬高，然后把組件rpx單位的寬高填充到畫布的px單位，通過(guò)

wx.createSelectorQuery().select('#canvas-container').boundingClientRect(function (rect) {

var width = rect.width // 節(jié)點(diǎn)的寬度 節(jié)點(diǎn)高度 為 rect.height

}).exec()

獲取節(jié)點(diǎn)的rpx單位的寬高會(huì)自動(dòng)轉(zhuǎn)換成px單位。

使用在畫布里面：