This is the NTH day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

In recent years, front-end data visualization has become more and more important. Many party A fathers like the cool big screen design, similar to the following:

Most of the projects that students encounter are echarts or chart.js, combined with a variety of MVVM frameworks (VUE), find components that have been wrapped twice, and then start to write. As you write, you will find, how to adapt to different screens? CSS media query, vw, which is better. In fact, in the end, I think it is not good for this kind of indecisive situation, it is best to refer to the practice of the big factory, so to find netease, Baidu Suger, etc., carefully observe them all use CSS3 scaling transform: Scale (X) property, doesn’t that make a lot of sense so we just listen to the browser window size, and control the scale, and how they write pages like this:

Create the scalebox.vue file in the Components directory

<template> <div class="ScaleBox" ref="ScaleBox" :style="{ width: width + 'px', height: height + 'px', }" > <slot></slot> </div> </template> <script> export default { name: "ScaleBox", props: { }, data() { return { scale: "", width:1920, height:937 }; }, mounted() { this.setScale(); window.addEventListener("resize", this.debounce(this.setScale, 100)); }, methods: { getScale() { let { width, height } = this; let wh = window.innerHeight / height; let ww = window.innerWidth / width; console.log(ww < wh ? ww : wh); return ww < wh ? ww : wh; }, setScale() { if(window.innerHeight ==1080){ this.height = 1080 }else{ this.height = 937 } this.scale = this.getScale(); if (this.$refs.ScaleBox) { this.$refs.ScaleBox.style.setProperty("--scale", this.scale); } }, debounce(fn, delay) { let delays = delay || 500; let timer; return function () { let th = this; let args = arguments; if (timer) { clearTimeout(timer); } timer = setTimeout(function () { timer = null; fn.apply(th, args); }, delays); }; ,}}}; </script> <style lang="scss"> #ScaleBox { --scale: 1; } .ScaleBox { position: absolute; transform: scale(var(--scale)) translate(-50%, -50%); display: flex; flex-direction: column; transform-origin: 0 0; left: 50%; top: 50%; The transition: 0.3 s; z-index: 999; } </style>Copy the code

Page references, put the large front page layout into the ScaleBox component, and you can happily use px or % layout

Import ScaleBox from '@/components/ scalebox. vue' <ScaleBox > contents </ScaleBox >Copy the code

Just by placing the page in this component, you can achieve a similar effect to the big manufacturers. It doesn’t matter how big the screen is or how high the resolution is, as long as the screen is at the same scale as you want it to be, it will look perfect. And in the development process, the style unit can also be directly used PX, save the trouble of conversion ~~~