大屏项目开发

需求

做大屏项目，要保证1920 和 2560 及更大分辨率下的展示，主要是图表和地图相关功能
技术栈：vue + openlayers + v-charts
选取方式，最开始是纯展示性质的，很少的动态交互，设计是希望能够保存16:9 的一个比例
但是大屏对分辨率和显示器是有要求的，不是一般的页面，可以出行滚动条，不是特殊情况下，大屏是不能出现滚动条的，所以其实不是随便一台电脑，随便一个分别率都可以使用大屏的，目前一般的分别率是 19201080100%的，但是具体得根据设计师设计图决定，还有，大屏是一般是全屏效果，就是F11电脑全屏，不加上浏览器上不标签栏、地址栏和书签栏的区域。
所以在媒体查询和还是 阿里的flexible方式 或者通过scale方式中衡量
最后选择了通过scale 方式，主要原因是简单，保存比例，通过缩放让整体在全屏变化下自由变化
大屏项目还有一个关键点就是字体，图片，图表的自适应问题，为了保持大小不变，选择 postcss-px2rem，在写样式时候可以自由写px，会自动转为对应的rem

具体实现

新建screen.js 文件

// 屏幕适配 mixin 函数

// * 默认缩放值
const scale = {
   
  width: '1',
  height: '1',
}

// * 设计稿尺寸（px）
const baseWidth = 1920
const baseHeight = 1080

// * 需保持的比例（默认1.77778）
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))

export default {
   
  data() {
   
    return {
   
      // * 定时函数
      drawTiming: null
    }
  },
  mounted () {
   
    this.calcRate()
    window.addEventListener('resize', this.resize)
  },
  beforeDestroy () <