Several adaptation schemes for large visual screens

For visual large-screen projects, we mainly need to consider the following two issues:

The first is the adaptation of the div element. It is necessary to maintain that each div element will still display the normal ratio under different resolution screens, and will not become stretched and deformed due to different resolution screens;

The second factor to consider is the font. Usually we will set the font to px, but it is not suitable for large-screen projects, and there will be inconsistencies.

solution:

1. css3 transform:scale() method

In the project, you can directly use the px unit in the design draft to develop, and all elements in the body will be scaled, so that the echarts chart will not exceed the canvas;

It should be noted that when binding the resize event, don't forget the anti-shake, and don't forget to remove the listening event when the page is destroyed

If the display screen is not 16:9 when we use it directly, then our project may appear blank. The solution is as follows:

function resize() {
          var ratioX = $(window).width() / 1920; //此处的宽高根据自己屏幕的比例修改即可
          var ratioY = $(window).height() / 1080;
          $("body").css({
              transform: "scale(" + ratioX + "," + ratioY + ")",
              transformOrigin: "left top",
              backgroundSize: "100% 100%"
          });
          $("html").css({'overflow':'hidden'})
}

Reference recommendation:

Several methods of large-screen visualization screen adaptation - Nuggets

Front-end visualization large-screen adaptation solution_Then play the music and dance. Blog-CSDN blog_Front-end large screen adaptation

Two, rem+grid (or percentage)

When the page is loaded for the first time, judge the width and height of the viewport. If the width/height of the viewport is > 16/9, it means that the width of the viewport is wider than that of the design drawing. The actual display width should be equal to the height of the viewport * 16/9.

If the width/height of the viewport < 16/9, it means that the height of the viewport is higher than the design drawing, the actual display width should be equal to the width of the viewport, and the display height should be equal to the viewport width/(16/9).

Then set font-size: pageWidth / 100 px, so that 100rem is equal to 100% width, and then all size settings are done through rem, so that it can be adapted to a large screen of any proportion.

<script>
  const clientWidth = document.documentElement.clientWidth
  const clientHeight = document.documentElement.clientHeight
  window.pageWidth = clientWidth / clientHeight > 16 / 9 ? clientHeight * (16 / 9) : clientWidth
  const pageHeight = pageWidth / (16 / 9)
  const string = `<style>html{
      font-size: ${pageWidth / 100}px
    }</style>`
  document.write(string)
 
  root.style.width = pageWidth + 'px'
  root.style.height = pageHeight + 'px'
  root.style.marginTop = (clientHeight - pageHeight) / 2 + 'px'
</script>

Reference link: Adaptation and layout of large-screen visualization_A-Tione's blog-CSDN blog_Large screen layout

Three, vw and vh adaptation scheme

Screen Viewport Width = 100vw, Screen Viewport Height = 100vh

vw and vh are also standard units in css, the same as px, rem, % vw and vh adaptation scheme, according to the size of the design draft, pxwill be vwandvh

Then we need to encapsulate a processing function and let it automatically calculate for me. Here I use scss

//使用scss的math函数，https://sass-lang.com/documentation/breaking-changes/slash-div
@use "sass:math"; 
 
 
//默认设计稿的宽度
$designWidth:1920;
//默认设计稿的高度
$designHeight:1080;
 
 
//px转为vw的函数
@function vw($px) {
  @return math.div($px , $designWidth) * 100vw;
}
 
//px转为vh的函数
@function vh($px) {  
  @return math.div($px , $designHeight) * 100vh;

Reference link: All the big data visualization screen adaptations you want are here_Fried Pikachu's Blog-CSDN Blog_Visualized large screen adaptation solution

4. Other resource websites

Here are some resource websites that may be used for large-screen visualization:

1. Vue large-screen data display component library: DataV

2. Map tools: DataV.GeoAtlas geographical gadget series

3. The fancy echarts advanced diagram: the fancy echarts: PPChart - make the chart simpler

Several adaptation schemes for large visual screens

Guess you like