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

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

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

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

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

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

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

}).exec()

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

使用在畫布里面：