vue專案如何監聽視窗變化，達到頁面自適應？

【自適應】向來是前端工程師需要解決的一大問題——即便作為當今非常火熱的vue框架，也無法擺脫——雖然elementui、iview等開源ui元件庫層出不窮，但官方庫畢竟不可能滿足全部需求，因此我們可以通過【監聽視窗變化】達到想要的絕大部分自適應效果。

獲取視窗寬度：document.body.clientwidth

監聽視窗變化：window.onresize

同時回顧一下js裡這些方法：

網頁可見區域寬：document.body.clientwidth

網頁可見區域高：document.body.clientheight

網頁可見區域寬：document.body.offsetwidth (包括邊線的寬)

網頁可見區域高：document.body.offsetheight (包括邊線的寬)

我們將document.body.clientwidth賦值給data中自定義的變數：

data:)()

}監聽screenwidth屬性值的變化，列印並觀察screenwidth發生變化的值：

watch:,400)

}}好！既然可以監聽到視窗screenwidth值的變化，就可以根據這個值設定不同的自適應方案了！

div或img的寬度自適應很簡單——設定css裡width屬性為百分比即可——但是高度呢？父級元素的高度並不是固定的（通常都是子級元素撐開的）

如上圖，乙個類似【庫】的功能，當螢幕放大縮小時，我們可以設定外層邊框（也就是灰色框框）的寬度為100%，以達到自適應——但高度無法設定，因此我們需要：

1.資料載入完後，獲取（或外層框）的寬度

2.根據這個寬度，設定外層框的高度（如：寬度的60%）

3.監聽視窗screenwidth值的變化，每次變化都重新獲取寬度，並重新設定高度

所以，我們只需在前文**的基礎上，新增以下**，以確保螢幕縮放時，每次監聽寬度變化：

mounted() )

// 2、掛載 reisze 事件 → 螢幕縮放時監聽寬度變化

const that = this

window.onresize = () => )

})()

}最終實現效果如下：

vue專案如何監聽視窗變化，達到頁面自適應？

自適應 向來是前端工程師需要解決的一大問題 即便作為當今非常火熱的vue框架，也無法擺脫 雖然elementui iview等開源ui元件庫層出不窮，但官方庫畢竟不可能滿足全部需求，因此我們可以通過 監聽視窗變化 達到想要的絕大部分自適應效果。獲取視窗寬度 document.body.clientw...

vue 監聽windows視窗大小變化

data mounted that.timer false 400 只需要監聽視窗大小，上面的 已經夠了，然後是echart大小改變的乙個細節，我是每個echart圖表都是乙個元件，乙個父元件有多個echart子元件，如下 開始我在每個子元件都寫了乙個上面的方法，但是發現頁面只有乙個圖示會隨著瀏覽器...

vue cli專案監聽視窗大小變化

上述 雖然貌似很麻煩，但如果能正常執行也能勉強接受。但惱人的是第二次使用的時候就會出錯了，是那種控制台不報錯，啥都沒改就自己錯了找一下午找不出原因的那種錯！聽起來是不是很神奇甚至想試試 至於說第二次使用是什麼意思呢？這應該很常見。比如你的專案裡得有乙個導航條吧，這玩意兒得單獨做個元件吧，那麼它得監聽...