【大屏数据可视化——屏幕适配方案(多分辨率）】

前言

基于目前所做的大屏数据可视化项目,提供的一个参考方案;按照设计稿的宽高比,适配不同的设备,进行放大和缩小.

简单概念

1.常见的大屏设备分辨率
1366 * 768 ： 普通液晶显示器
1920 * 1080： 高清液晶显示器+笔记本
2560 * 1440： 2K高清显示器
4096 * 2160： 4K高清显示器

2.涉及的参数
视口宽度,高度:即所视网页的宽高(不包含地址栏,tab栏,导航栏等)

常见问题

1.通常数据大屏的设计稿是按照1920*1080的比例去设计,宽高比近似于16:9,所以为了保持这个宽高比,会将所视窗口的页面按照16:9去适配
2.视口宽高比不是16:9,左右或者上下会出现白边

解决方案

首先是App.vue 宽高设为所见视口宽高.

 <template>
  <div id="app">
    <nav>
      <router-view></router-view>
    </nav>
  </div>
</template>

<style lang="less" scoped>
#app{
   
  width: 100vw;
  height: 100vh;
  background-color: rgba(11, 21, 34);  // 取大屏的背景色,不设置会出现白边
  overflow: hidden;
  display: flex;    //使用弹性布局,将页面居中显示
  justify-content: center;
  align-