Large-screen visualization is proportionally scaled according to the screen resolution

For the problem that the large screen is scaled according to the screen resolution, you can use CSS transformproperties to achieve it.

The specific implementation method is as follows:

1. First, you need to set a fixed width and height for your large screen, for example:

   .container {
     width: 1920px;
     height: 1080px;
   }

2. Then, you can use transformattributes to scale .containerthe element, for example:

   @media screen and (max-width: 1920px) {
     .container {
       transform: scale(0.8);
       transform-origin: top left;
     }
   }

   In the example above, we use media queries to detect if the screen resolution is less than 1920px, and if it is less than 1920px, we use the transformattribute to .containerscale the element down to 80%. We also use transform-origina property to set the zoom's center point to the upper left corner to ensure that large screens scale proportionally.

   Note that this approach may cause some pixelation or distortion, especially when you scale down the element. To combat this, you can consider using vector images and scalable image formats like SVG, which maintain clarity and quality when scaled.

   In addition, if you are using some professional large-screen visualization tools or frameworks, it may already provide the function of automatic scaling, you can check their documentation or source code for more information.