大屏适配不要太恶心

前言: 大屏适配问题估计是写大屏项目中最让人头疼的事,我也遇到了很多,自己写的大屏在浏览器缩放或者不同分辨率下存在差异,样式字体等存在严重变形问题,echarts图表大小不变,导致突出,整个大屏存在缩放等等等等!!!

头疼了半天,还是得想办法解决,我们一个一个先解决吧

首先,浏览器可视区域变小时,整个项目在浏览器运行中存在缩放问题

这个就是因为我用的是dataV的组件,在整个项目的最外层加了一个全局容器的标签。

<dv-full-screen-container>content</dv-full-screen-container>

我们先看一下,该标签的介绍:然后,我将该标签删掉,就不再进行缩放了,这个问题解决之后,最让人头疼的问题就出来了,就是浏览器缩放,字体还是这么大,因为我使用的是px,所以再怎么变化,字体的大小还是不会变化,所以,这里,我们得采用相对单位了。
这样将css中的px转化为rem相对单位,我选择采用PostCSS插件,话不多说,我们先安装一下。

npm install postcss-pxtorem@5.1.1

我们再安装一下amfe-flexible,amfe-flexible是配置可伸缩布局方案，主要是将1rem设为viewWidth/10。

npm i amfe-flexible -S

接下来,我们需要在main.js中引入   amfe-flexible  

import 'amfe-flexible/index'

引入完毕之后,我们配置一下config.js文件,随后重新运行一下项目即可。

运行完成之后,字体也会随着宽度进行变化了接下来,我们再解决一下echarts不会随着浏览器的可视宽度变化而变化这个问题。
一开始,我想用js的定时器,但是感觉不太好,页面也会变得越来越卡。
我们还是监听一下浏览器的宽度变化吧

 window.onresize ：监听 window 窗口变化，当窗口大小发生变化时，会触发此事件。所以,我们在父组件中写一个这个方法,当视口宽度变化时,我们去让子组件中的echarts图表去变化,大概有思路之后,我们去写一下。随后,我们需要借助事件中心来完成以下的操作。

首先我们需要在Vue的原型上挂在一个$hub

Vue.prototype.$hub = new Vue();

随后,我们需要触发$emit,在组件摧毁时,通过$off方法将事件关闭

我们在子组件中,需要触发$on并判断echarts初始化是否有值,如果有值,我们就让echarts图表重新变化,调用resize方法即可。

这样,我们的大屏适配就ok啦