Monitor real-time changes to the page

Mar 26, 2021#js24

AI Translation

This post is translated from Chinese into English through AI.View Original

AI-generated summary

The article discusses how to monitor changes in a webpage in real-time using JavaScript, particularly to address layout issues on different devices. The author suggests using media queries in CSS or the window resize event in JavaScript to adjust elements based on the page's width. However, caution should be exercised when using the window event in actual coding.

The problem arises from the requirements because the project needs to adapt to multiple layouts for both PC and mobile devices, causing certain elements to be misaligned under specific widths.

If it is in CSS, it can be easily determined. By using media queries, the page width can be detected in real-time, and different attributes can be applied to the tags.

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

In JavaScript, the following method can be used:

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

You can try the specific details of the operation, and it is still a very good method. Also, pay attention to window because this is just an example that I wrote directly. In actual coding, use the window event with caution.