大屏適配方案

rem方案

以vue的cli3搭建的項目為例，在index.html中添加

        (function (doc, win) {
          const uiWidth = 1312; // 設計稿寬度
          const docEl = doc.documentElement;
          const resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
          const recalc = function () {
              let clientWidth = docEl.clientWidth;
              if (!clientWidth) {
                  return;
              }
              // if (clientWidth >= uiWidth) {
              //     clientWidth = uiWidth;
              // }
              docEl.style.fontSize = 100 * (clientWidth / uiWidth) + 'px';
          };
          if (!doc.addEventListener) {
              return;
          }
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
            recalc();
        })(document, window);

增加插件自動轉換px到rem，修改vue.config.js

const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');

module.exports = {
    ... ...
    css: {
        loaderOptions: {
            postcss: { // px => rem
                plugins: [
                    autoprefixer(),
                    pxtorem({
                        rootValue: 100,
                        propList: ['*', '!border*'] // 忽略border
                    })
                ]
            }
        }
    }
}

scale方案

在頁面內容的根結點進行縮放，以vue的cli3搭建的項目為例

<template lang="pug">
#app(ref='bigscreen')
    router-view
</template>

<script>
export default {
    data () {
        return {
            timer: null,
            scaleCoeff: 0,
            baseWidth: 1312,
            baseHeight: 750
        };
    },
    mounted () {
        // 繪制
        this.calcRate();
        // 改變窗口大小重新繪制
        window.addEventListener('resize', this.resize);
    },
    methods: {
        calcRate () {
            let baseRate = (this.baseWidth / this.baseHeight).toFixed(5);
            let currentRate = (window.innerWidth / window.innerHeight).toFixed(5);
            let db = this.$refs.bigscreen;
            if (db) {
                if (currentRate > baseRate) {
                    // 以高為准
                    this.scaleCoeff = (window.innerHeight / this.baseHeight).toFixed(5);
                    db.style.transform = 'scale(' + this.scaleCoeff + ') translate(-50%,-50%)';
                } else {
                    // 以寬為准
                    this.scaleCoeff = (window.innerWidth / this.baseWidth).toFixed(5);
                    db.style.transform = 'scale(' + this.scaleCoeff + ') translate(-50%,-50%)';
                }
            }
        },
        resize () {
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.calcRate();
            }, 100);
        }
    }
};
</script>

<style scoped lang="scss">
#app {
    position: absolute;
    width: 1312px;
    height: 750px;
    overflow: hidden;
    background: #102058;
    color: #ffffff;
    padding-top: 0.48rem;
    transform-origin: left top 0px;
    left: 50%;
    top: 50%;
    & > div {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
    }
}
</style>