實時監控頁面的變化

2021年3月26日#js24

AI 翻譯

這篇文章透過AI由簡體中文翻譯成繁體中文。查看原文

AI 生成的摘要

在這篇文章中，作者討論了如何實時監測網頁的變化，以適應不同設備的佈局需求。對於CSS，可以使用媒體查詢來根據頁面寬度調整樣式；而在JavaScript中，可以透過監聽`load`和`resize`事件來獲取當前視窗寬度並進行相應的處理。作者建議在實際編碼中謹慎使用`window`事件。

問題產生於需求，因為專案需要適配 pc 和移動端多套佈局，所以某些元素在特定的寬度下會產生錯位的現象。

如果是在 css 中，可以很好的判斷，使用媒體查詢可以實時檢測頁面的寬度，從而給予標籤不同的屬性。

@media (max-width:768px){
    ...
}

在 js 下可以使用下面這種方法

window.addEventListener('load', function() {
    window.addEventListener('resize', function() {
        console.log(window.innerWidth)
        var w = window.innerWidth;
        ...
        }
    })
})

具體操作的細節可以嘗試一下，還是很不錯的一個方法，同時注意 window ，因為這是一個例子我就直接寫了，實際編碼中，慎用
window 事件。