大屏项目开发

需求

做大屏项目，要保证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 () {
    window.removeEventListener('resize', this.resize)
  },
  methods: {
    calcRate () {
      const appRef = this.$refs["appRef"]
      if (!appRef) return 
      // 当前宽高比
      const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
      if (appRef) {
        if (currentRate > baseProportion) {
          // 表示更宽
          scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
          scale.height = (window.innerHeight / baseHeight).toFixed(5)
          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
        } else {
          // 表示更高
          scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
          scale.width = (window.innerWidth / baseWidth).toFixed(5)
          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
        }
      }
    },
    resize () {
      clearTimeout(this.drawTiming)
      this.drawTiming = setTimeout(() => {
        this.calcRate()
      }, 200)
    }
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

在页面布局中引入screen.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

postcss-px2rem 的使用

在vue.config.js 中声明，在 plugins 中使用
loader和 plugins的一个区别就是
在webpack中 loader更多是在资源整合中加载资源文件时使用，将对应的资源转为合适的格式，例如scss转为css，利用于加载
而plugins 更多扩展webpack，在全局都可以使用，不仅局限于加载时，功能更丰富

const path = require('path')
const resolve = dir => {
  return path.join(__dirname, dir)
}
// 引入等比适配插件
const px2rem = require('postcss-px2rem')

const postcss = px2rem({
  remUnit: 16
})

module.exports = {
  publicPath: './',
  runtimeCompiler: true,
  devServer: {
    overlay: {
        warnings: false,
        errors: false
    },
    open: true,
  },
  assetsDir: 'static',
  lintOnSave: true,
  chainWebpack: config => {
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))       //注意svg的存储地址
      .end()
    config.resolve.alias
      .set('_c', resolve('src/components')) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set('@', resolve('src'))
      .set("public", resolve("public"))
  },
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43