How does the I'mQQ site automatically increase the width of some elements when the page shrinks?

For the

for example, the an in the upper left corner (the initial width is 36px when you zoom 67% in the home), Chrome browser, and then it starts to widen to 96px under 25%, but the width does not change when you zoom in, and the width of the corresponding elements in my copied web page does not change (regardless of zooming).

I think this can avoid element misalignment to some extent when zooming, but I don"t know why.

I saw resize in EventListeners and thought it might be relevant, but no relevant content was found in the jQuery source code.

Javascript css html front-end

Mar.22,2021

you can consider using media queries to implement

CSS3 mediaQuery

@media and (max-width: 600px) {
    div {
        width: 100%;
    }
}

you can use resize, to listen for window size changes, and then change the style, but also determine the window size, change the style through js.
$(window) .resize (function () {
.
});
query directly with media

Previous: On the jump path of WeChat Mini Programs

Next: Ask the question of introducing the module into python

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b369af-2c036.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b369af-2c036.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?