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

This article discusses how to monitor changes in a webpage in real-time. It explains that the need for adapting layouts for both PC and mobile devices can cause elements to become misaligned at certain widths. The article suggests using media queries in CSS or JavaScript methods to detect and handle these changes. It advises caution when using window events 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 well handled by using media queries to detect the width of the page in real-time and apply different attributes 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, it is still a very good method, but pay attention to window because this is just an example I wrote directly. In actual coding, use the window event with caution.