Detailed explanation of the resolution adaptation of large screen elements by Vue command

Preface

With the continuous development of front-end technology, the continuous upgrading of concepts such as data centers (middle platform), and the update and popularization of IoT devices, more and more owners (projects) like to add one or more visual large screens to the system to centrally display data changes, location changes, etc., and bosses also prefer to call it "scenarios".

Of course, as programmers, generally don’t care about the “bosses”’s ideas, just complete the project. But there are often problems: I have a template with a large screen, but the user's browser resolution is not enough, or some have bookmark bars, some have bookmark bars, and some have full screens and some are just small windows, so that the code has adapted to different resolution scenarios.

1. Common adaptation options

The web-side adaptation solutions we usually use are mainly as follows:

• vw/vh is implemented in proportion to allow elements to be automatically adjusted according to the window size
• fontSize and rem achieve the unification of "unit width"
• Adjust page layout according to different resolution ranges
• Layout with minimum width

Currently, the principles of most screen adaptation solutions are adopted in the above methods, but these methods also have great disadvantages:The browser text has the smallest size!

In general screens with resolutions of 1080p and above, the scale and display effects of most design drawings can be restored perfectly. However, if the page content of a certain system is too much, or the resolution used by the browser part (not physical resolution) cannot meet the requirements for complete display, the above methods may causeThe calculated size of the text is less than the minimum font size of the browser, at this time, the page style may crash because the text width exceeds the element.

The layout and minimum width can ensure the display effect, but it is not suitable for large-screen projects.

2. CSS3 scaling scheme

When the above solutions are not met, we usually adopt another solution: CSS3 scale.

Dynamically adjust the scaling ratio of elements by calculating the design drawing size ratio and the actual page display area size.

I personally think this is the best way to retain the display content and style under small resolution.

Of course, this method still has some disadvantages:

• Scaling may cause blurred edges
• If the canvas element is present internally, it may cause the rendering of content inside the canvas
• Gaode Map causes event coordinate offset (2.0 has been fixed)
• ...

3. Encapsulate a scaling instruction

Here I briefly review Vue's custom instructions: by configuring custom instructions and binding parameters, corresponding processing logic is executed at different periods such as component/element loading, updating, and destroying.

Vue's custom directive contains the following hook functions:

• bind: Execute when parsing to instruction binding, only once
• inserted: Execute when inserting the parent node
• update: Execute when the component triggers an update
• componentUpdated: Execute after all components are updated.
• unbind: executes when element is unbind (destroyed), and only executes once.

Here, because we only need to bind the browser's resize event during initialization to adjust element scaling, we only need to configure inserted; of course, in order to optimize code logic and reduce resource consumption, we also need to cancel a callback function of the resize event in the unbind stage.

The code is as follows:

// Zoom commandimport Vue from "vue";
function transformScale(el, options) {
  const { target = "width", origin = "top left" } = options;
  (() => {
    // Get the display area height and width    const width = ;
    const height = ;
     = origin;
    if (target === "ratio") {
      const scaleX = width / ;
      const scaleY = height / ;
       = `scaleX(${scaleX}) scaleY(${scaleY})`;
    } else {
      let scaleProportion = 1;
      if (target === "width") {
        scaleProportion = width / ;
      }
      if (target === "height") {
        scaleProportion = height / ;
      }
       = `scale(${scaleProportion})`;
    }
  });
}
function inserted(el, binding) {
  const options =  || { passive: true };
  const callback = () => transformScale(el, );
  ("resize", callback);
  callback();
  el._onResize = {
    callback,
    options
  };
}
function unbind(el) {
  if (!el._onResize) {
    return;
  }
  const { callback } = el._onResize;
  ("resize", callback);
  delete el._onResize;
}
export const Scale = {
  inserted,
  unbind
};
export default Scale;

illustrate:

• The instruction receives an object parameter to specify the scale calculation method and scaling positioning
• A global configuration CONF object is required to specify the default page size
• In order to ensure that the page has been loaded and the dom element can be obtained, it is necessary to call it
• Need to destroy the listening event

The whole code is actually very simple, it is to adjust the scaling ratio of the element by listening to the resize event.

But here I have also made a little configuration to adapt to more situations:

• Receive a target configuration to confirm the calculation method of proportion; width or height can be used as a unified scaling standard, or can be calculated separately
• Receives the origin configuration of transform to ensure that elements in different positions can be scaled to different positions and avoid scaling offsets.
• The size of the bound element is not involved, only the default size is required; when writing code, you can directly configure the element size according to the design drawing.

4. Postscript

Of course, this instruction cannot be said to be perfect, there are still many vulnerabilities, such as no anti-shake, scaling will not change the size specified by CSS, and scroll bars are prone to appear;

Moreover, because the previous projects also involved many charts and maps, which often lead to some display problems, some new instructions were added later, but the specific solution should be determined based on the actual situation.

The above is the detailed explanation of the resolution adaptation of Vue commands for large screen elements. For more information on the resolution adaptation of Vue commands for large screen elements, please pay attention to my other related articles!