How does the front end solve the influence of the zoom ratio of the screen display setting on the pc side on the page layout?

now many laptops recommend setting the zoom to 125% and magnifying the display proportionally.
clipboard.png
:

clipboard.png

clipboard.png
when the logo on both sides of the top and the white space on both sides of the menu are less, zooming in may result in incomplete display of the logo and menu on both sides. I would like to ask if you have ever encountered such a situation, and provide solutions, design point of view and front-end development point of view can be, thank you.

< hr >

Thank you for your kind answers. I will carefully refer to your opinions and reply in the comments when they are settled.

Sep.28,2021

this hole has really been stepped on, and it took a small week before and after.

  1. first of all, the individual responsive layout hold can't handle this problem, because the problem is device-pixel-ratio .
  2. The phenomenon of
  3. problem is that the things arranged under the high-score screen will be enlarged under the common-split screen, while the things arranged under the common-split screen will shrink on the high-score screen.
  4. Using < kbd > Ctrl < / kbd > + < kbd > + < / kbd > or < kbd > Ctrl < / kbd > + < kbd >-< / kbd > to reproduce this problem does not require high splash (so after solving this problem, it can also prevent users from mistakenly touching the page to zoom). In addition, the recovery is < kbd > Ctrl < / kbd > + < kbd > Num0 < / kbd > The key to the
  5. solution is that you have to write device-pixel-ratio in the media adaptation to individually adapt the pixel ratio; in addition, you need to convert most components from px units to rem units, because you need to adjust : root font-size in the device-pixel-ratio mentioned earlier to achieve the purpose of dynamic scaling
  6. .
  7. (plus compatibility) the code after writing is similar:

      

    before stepping on this hole, I probably checked the rendering width in the browser in 1200px after zooming.
    so if the pc site page is minimum compatible with 1200px, it should not be a problem

    .
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-1b326d7-e361.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-1b326d7-e361.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?