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.

Css Design layout
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
  2. 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.
    3. 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
  3. 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
    4. .

  4. (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 
    .

Previous: There are three columns of div, with fixed width of 200px on both sides and adaptive width in the middle. The height of the three columns is stretched by the content and is always consistent with the height of the highest div.

Next: Is there a better fixed scheme for scrolling to the top?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu