As front-end data visualization becomes more and more important, and the need for a big, cool screen increases, are you often bothered by the screen’s inability to adapt? How to restore the design draft highly? How to render perfect effect on multiple terminals? Perhaps this article can help you

When the screen width to height ratio is smaller than the design draft, spread the screen horizontally according to the design draft proportion. When the width to height ratio of the screen is greater than that of the design draft, cover the screen vertically according to the proportion of the design draft. Using proportional scaling, no matter how big the screen is or what the resolution is, it will look perfect, as shown in the image below.

This paper summarizes two adaptive methods of large screen based on proportional scaling. Take the following layout as an example.

<div className="screen-wrapper">
    <div className="screen" id="screen">
        <div class="section">A</div>
        <div class="section">B</div>
        <div class="section">C</div>
        <div class="section">D</div>
        <div class="section">E</div>
    </div>
</div>
Copy the code

1. Transform-based adaptive method

First calculate the zoom ratio, dynamically setting the zoom ratio of the <div ID =”screen”> element based on the screen size. The code looks like this:

function setScale(){
    let designWidth = 1366;// The width of the design draft can be adjusted according to the actual project
    let designHeight = 768;// The height of the design draft can be adjusted according to the actual project
    let scale = document.documentElement.clientWidth/document.documentElement.clientHeight < designWidth/designHeight ? 
         (document.documentElement.clientWidth / designWidth):
         (document.documentElement.clientHeight / designHeight);
    document.querySelector('#screen').style.transform = `scale(${scale}) translate(-50%)`;
}
window.onresize = function () {
    setScale()
};
Copy the code

Then set the style, the size of the element is exactly the size of the design. The code looks like this:

$design_width: 1366px;// The width of the design draft can be adjusted according to the actual project
$design_height: 768px;// The height of the design draft can be adjusted according to the actual project
.screen-wrapper {
   height: 100vh;
   width: 100vw;
   background-color: aqua;
   .screen{
      display: inline-block;
      width: $design_width;
      height: $design_height;
      background: yellow;
      transform-origin: 0 0;
      position: absolute;
      left: 50%;
      .section{
         height: 200px; width: 200px; outline: 1px solid #ddd; line-height: 200px; font-size: 40px; text-align: center; display: inline-block; }}}Copy the code

The realization effect is shown in the figure below. No matter how the screen changes, the content of the screen is equal scale display, without element deformation and dislocation. It works best when the screen is in proportion to the design.

2. Adaptive method based on REM

First calculate the zoom ratio, set dynamically based on the screen size, the fontSize value of the root element HTML.

setFontSize()
function setFontSize(){
    let designWidth = 1366;// The width of the design draft can be adjusted according to the actual project
    let designHeight = 768;// The height of the design draft can be adjusted according to the actual project
    var fontSize = 
        document.documentElement.clientWidth/document.documentElement.clientHeight < designWidth/designHeight ? 
        (document.documentElement.clientWidth / designWidth) * 12:
        (document.documentElement.clientHeight / designHeight) * 12;
    document.querySelector('html').style.fontSize = fontSize + 'px';
}
window.onresize = function () {
    setFontSize()
};
Copy the code

To set the style, convert the element unit PX to REM.

$design_width: 1366;// The width of the design draft can be adjusted according to the actual project
$design_height: 768;// The height of the design draft can be adjusted according to the actual project

@function px2rem($px) {
   $design_font_size: 12;
   @return ($px/$design_font_size) + rem;
}
.screen-wrapper {
   height: 100vh;
   width: 100vw;
   background-color: aqua; 
      display: flex;
      flex-direction: row;
      justify-content: center;
   .screen{
      display: flex;
      flex-direction: row;
      justify-content: center;
      width: px2rem($design_width);
      height: px2rem($design_height);
      background: pink;
      .section{
         height: px2rem(200);
         width: px2rem(200);
         border: 1px solid #000;
         line-height: px2rem(200);
         font-size: px2rem(100);
         margin: px2rem(20); text-align: center; display: inline-block; }}}Copy the code

As shown in the figure below, the content is also displayed in proportion to the design draft. No matter how the screen changes, the content is displayed in equal scale, without element deformation and dislocation. It works best when the screen is in proportion to the design.

3. Summary

  • The scheme based on transform scaling has the advantage of setting the element size according to the design draft without converting length units. The downside is that when you zoom in, echarts and other charts can be distorted. In order to avoid chart distortion, the design should be designed according to the large screen size, so that it can be displayed in the screen. For example, 1920*1080 and 1366*768 are both 16:9 design draft, should be designed according to 1920*1080 size.
  • Based on rem scaling scheme, element length units need to be converted to REM. When you zoom in, there will be no distortion of the chart. When zooming out to the root element fontsize<12px, the text cannot be zooming out any further because the browser displays a minimum fontsize of 12px. The solution is to set the minimum width and height of the canvas and add scroll bars when the screen is smaller than the minimum width and height so that the canvas is no longer shrunk.