Data visualization large screen

In the daily front-end development work, we often meet some large screen project requirements, such as a 3 * 3 large screen, the actual screen size is 5760 * 3240, but the design draft size is 1920 * 1080,5 * 3 large screen, The actual screen size is 9600 * 3240, but the size of the design draft we got is 3200 * 1080. It can be seen that the design draft we got is basically the size ratio of the actual size /3, so how can we debug it in our own development environment? And achieve screen adaptation?

Use amfe – flexible

Amfe-flexible is intended for mobile applications. Amfe-flexible sets the FONT size of HTML to a screen resolution of /10, i.e. 1920 * 1080.

The installation
npm install amfe-flexible -S
Copy the code
use
// main.js introduces import'amfe-flexible';
Copy the code
With the help of rem

Rem is CSS3’s new unit of relative length, which refers to the size of the computed value relative to the font size of the root HTML element. It’s simply a percentage of the screen width. After setting the FONT size of the HTML to a screen resolution of /10 using amfe-Flexible, we can calculate the size of the root HTML element.

Font size for the root HTML is 192; // px .dom { width: 100px; } // automatically convert to rem. dom {// 100/192 width: 0.52083333rem; }Copy the code

However, there will be many PX units on a page. If we need to calculate each one manually, it will increase a lot of work. Therefore, we can use PostCSs-pxtorem to introduce an automatic calculation package to automatically convert my defined PX units into REM units.

Use postcss – pxtorem

Postcss-pxtorem converts PX to REM. Rem units are used to calculate the result based on the font size value of the tag. 1rem= the FONT size value of the HTML tag

npm install postcss-px2rem -S
Copy the code

Run the postcss-pxtorem command to create the. Postcsrc. Js file

module.exports = {
    "plugins": {
      'postcss-pxtorem-include': {
        include: 'src/views/fullScreen/*'UnitPrecision: 6, propList: [rootValue: 320, unitPrecision: 6, propList: [The '*',}}}Copy the code

Note: Include can specify the directory or file to convert px-REM rootValue. Note that this value is the width of the design you receive /10, such as 1920 * 1080 design, Here rootValue:192. If the size of the design draft is 3200 * 1080(5*3), rootValue: 320.

Analysis of the

3*3 Large screen Size 1920 * 1080 Actual screen size 5760 * 3240 We set a DOM according to the design size

// Font-size: 192. dom {width: 200px; height: 200px; } // convert to rem. dom {// 200/192 width: 1.0416666667rem; Height: 1.0416666667 rem; }Copy the code

In the actual screen casting size 5760 * 3240, the actual width and height corresponding to DOM is calculated as follows:

// font-size: 576. dom {// 1.0416666667 * 576 width: 600px; height: 600px; }Copy the code

Instance view

5 x 3 Large screen Design draft size 3200 x 1080 Actual screen size 9600 x 3240

// Font-size: 320.dom {width: 200px; height: 200px; } // convert to rem. dom {// 200/320 width: 0.625rem; Height: 0.625 rem; }Copy the code

In the actual screen casting size of 9600 * 3240, the actual width and height of DOM are calculated as follows:

< span style = "max-width: 100%; clear: both; height: 600px; }Copy the code

Instance view

Such as echarts need to dynamically set the size.
// num is the set size (px).functionGetSizeByScreen (num) {3200 is the width of your design.return Math.ceil((num / 3200) * window.screen.width);
   }
Copy the code