十五、vue3.0项目可视化大屏适配之less方法

        大家好，这期主要讲讲vue3.0的可视化大屏如何做适配的，目前主流的前端的可视化大屏有三种方法，分别为

一、scale()等比例缩放，

我一般把这种发放用在app或者小程序端，因为这两个需要在手机上查看，手机又比较小，在字体之能缩小到10px的情况下，使用这个方法非常的方便。

二、百分比布局

 这个我一般只使用在组件的开发中，比如Form表单，table等，在布局较为复杂的可视化大屏上我不推荐使用。

三、vh，vw布局

        这个是我推荐的。当然我们要知道屏幕视口宽度最大为100vw，屏幕视口高度最大为100vh。在开发可视化大屏的时候这个属性可以给我们无论在横向还是竖向上都能进行适配。

        我使用的less，设计图使用的1920*1080来做的，来给大家讲讲我是如何使用的。

        我代码中的@px为传进去的值，无论是width,height,fontSize,marginBottom等值都可以使用.px2vw(214) [ @result]的方法获取，

        当然你的高度可以使用    @result: calc(@px * 100vw / 1920)来设置

<style lang="less" scoped>
  .px2vw(@px) {
    @result: calc(@px * 100vh / 1080);
  }
  .charts-warpper {
    width: 100%;
    background: #020f17;
    display: flex;
    flex-direction: column;
    height: 100%;