在移動端開發(fā)中，獲取手機(jī)屏幕的寬度和高度是非常常見的操作。Vue可以使用原生JavaScript來獲取屏幕寬度和高度，從而實(shí)現(xiàn)響應(yīng)式布局。下面將介紹如何在Vue中獲取手機(jī)屏幕寬度和高度。

首先，使用Vue的生命周期鉤子函數(shù)created()來在組件創(chuàng)建時獲取屏幕寬度和高度。我們可以通過window.innerWidth和window.innerHeight來獲取屏幕的寬度和高度。這兩個屬性返回的是整個窗口的寬度和高度，包括滾動條和邊框。

created () {
this.screenWidth = window.innerWidth;
this.screenHeight = window.innerHeight;
}

在這個例子中，我們將獲取到的寬度和高度分別存儲在組件的data中。接下來，我們可以在模板中使用這些屬性進(jìn)行布局。

這是一個響應(yīng)式布局的容器

在這個例子中，我們將響應(yīng)式布局的容器的寬度和高度設(shè)置為屏幕的寬度和高度，這樣容器的大小就可以根據(jù)屏幕的大小進(jìn)行自適應(yīng)了。

如果我們想要在屏幕大小發(fā)生變化時自動更新容器的大小，可以使用window對象提供的resize事件。resize事件會在窗口大小發(fā)生變化時觸發(fā)，我們可以在事件處理函數(shù)中更新組件的data中存儲的屏幕寬度和高度。

mounted () {
window.addEventListener('resize', this.handleResize)
},
destroyed () {
window.removeEventListener('resize', this.handleResize)
},
methods: {
handleResize () {
this.screenWidth = window.innerWidth;
this.screenHeight = window.innerHeight;
}
}

在這個例子中，我們在組件的生命周期鉤子函數(shù)mounted()中添加了一個resize事件的監(jiān)聽器，然后在組件銷毀時移除該監(jiān)聽器。同時，我們定義了一個事件處理函數(shù)handleResize()，該函數(shù)會在resize事件觸發(fā)時更新組件的data中存儲的屏幕寬度和高度。

通過上述方法，我們可以很方便地在Vue中獲取手機(jī)屏幕的寬度和高度，并實(shí)現(xiàn)響應(yīng)式布局。當(dāng)然，在一些特殊的情況下，可能需要使用CSS媒體查詢來針對不同的屏幕大小設(shè)置不同的樣式。不管怎樣，Vue提供了很多靈活的方式來處理移動端響應(yīng)式布局，我們只需要根據(jù)具體的需求選擇合適的方法就可以了。