background

Recently, the company put the big data page on the large screen of the exhibition hall to demonstrate, there are many kinds of components such as text, chart, table display disorder.

purpose

Solve the page confusion problem, to achieve a variety of resolutions of large screen adaptation

Analysis into the pit

As the saying goes, through the most road, is the net friends routine

1. Combination of VH, VW and REM

body,html {
  font-size:1vw
}
Copy the code

Description: Define the size of the parent, and then use REM as the unit for CSS properties such as height, margin and padding of the component, and inherit the unit of the parent setting (1vw) to achieve adaptation.

Pit points: can only meet some specific small scenes, the implementation in the large screen is very unfriendly, for example, we overwrite the element table for font size: 0.5rem. The font is adaptive, but various default properties of its components are in px units. For example, if line-height is set to 22px, the font after overwriting the style is too large and cannot adapt to the line height, resulting in confusion such as text overlapping.

2. Use the combination of font. Js + REM

(function(doc, win) { var docEl = doc.documentElement var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize' var recalc = function() { var clientWidth = docEl.clientWidth if (! clientWidth) return docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px' } if (! doc.addEventListener) return win.addEventListener(resizeEvt, recalc, false) doc.addEventListener('DOMContentLoaded', recalc, false) })(document, window)Copy the code

Description: reference third-party scripts, by writing code in main.js calculation, using REM inheritance, adaptation.

Pit point: the principle is the same as the above method 1, also cannot achieve large screen adaptation, pit point is not described here.

solution

Mountains and rivers doubt no way, and a village

When we have no good method, we may as well use the power of ‘giant shoulder’. I found baidu, netease and other big data adaptation solutions. The following rules are found through online cases (below are some screenshots of netease I have taken) :

Logical analysis:

In the case above, the scaling transform: Scale (X) attribute of CSS3 is used. Comparing the two graphs, it is not difficult to find that the value of scale changes when I change the resolution. The front boys see this, must have understood the general. We just need to monitor the size of the browser window and control the percentage of changes.

Encapsulate a global component

This common component is named ScreenAdapter for the convenience described in the following sections

<template> <div class="ScreenAdapter" :style="style" > <slot /> </div> </template> <script> export default { name: // Props: {width: {type: String, default: '1920'}, height: {type: String, default: '1920'}, height: {type: String, default: '1080' } }, data() { return { style: { width: this.width + 'px', height: this.height + 'px', transform: 'scale(1) translate(-50%, -50%)' } } }, mounted() { this.setScale() window.onresize = this.Debounce(this.setScale, 1000) }, methods: { Debounce: (fn, t) => { const delay = t || 500 let timer return function() { const args = arguments if (timer) { clearTimeout(timer) } const context = this timer = setTimeout(() => { timer = null fn.apply(context, args) }, delay) } }, GetScale () {const w = window.innerwidth/this.width const h = window.innerheight/this.height return w < h ? w : SetScale () {this.style.transform = 'scale(' + this.getScale() + ') translate(-50%, }}} </script> <style lang=" SCSS "scoped>.ScreenAdapter {transform-origin: 0 0; position: absolute; left: 50%; top: 50%; The transition: 0.3 s; background: red; } </style>Copy the code

2. Use this component as a shell on the page we built

</div> </ScreenAdapter>

3. Define web specifications

  • According to the design given by the artist (mainly get the resolution given by the artist, such as 1920*1080).
  • Use flex+ percentage layout for Div layouts (you can also use PX as the default depending on the artist’s design). .
  • All kinds of space design can be defined according to the PX given by the artist

Unified reply to questions

Problem: many friends say that there will be blank after joining, need to debug. Solution: because the width and height of the injection is inconsistent with the actual resolution of the computer

Question: the width and height of injection are the same as the width and height of resolution, why there is a blank? Solution:

  1. If consistent, you just need to put the browser in full screen to see the correct effect.
  2. Will be injected into wide high into the document. The documentElement. ClientWidth, document. DocumentElement. ClientHeight. You can get the correct result even if it’s not full screen

This everybody should understand 😊, the foundation is very important, ha ha ~ ~ ~

The end of the speech

By following the above steps, you can enlarge the output of the same proportion in the large screen according to the design of the artist, which tends to solve the problem of large screen adaptation perfectly.

The spirit of the Internet lies in sharing. I hope this article can help some friends who meet the same problem as me.

Share your technology and record your beautiful life.