至此，一个适配不同尺寸的大屏展示方案就算初步完成了，下面我们看html布局和css代码
html部分，配置pug就不说了
<template lang="pug">
div#screen-wrapper
div.header-wrapper
div.main-wrapper
div.mid-wrapper
div.right-wrapper
div.left-wrapper
</template>
// 这里是一个简单的上下布局
<script src="http://www.likecs.com/control.js"></script>
<style scoped lang="stylus" src="http://www.likecs.com/style.styl"></style>
css部分，使用的是styls。
大屏的展示部分一定要使用px来设定宽高，使用绝对定位来让元素定位在水平垂直居中。
我的设计稿是按1920*1080，如果是一个比例，肯定就不会变动，但是当屏幕的实际高度小于这个展示应有高度的时候，rem就会重新计算，这个时候我就能让页面能完全居中展示
#screen-wrapper
width 100vw
height 100vh
background-size 100% 100%
overflow hidden
position relative
.header-wrapper
width:1920px
height: 64px;
overflow-x hidden
position absolute
left 0
right 0
top 0
margin 0 auto
.main-wrapper
overflow hidden
position absolute
left 0
right 0
top 64px
margin 0 auto
width 1920px
height calc(100% - 64px)
display flex
justify-content space-between
align-items center
.left-wrapper
width 25%
height 100%
.mid-wrapper
width 48%
height 100%
.right-wrapper
width 25%
height 100%
这个方案也不是很完美，由于一时间难以重做整个大屏，只能在原先的基础上修改，所以参考了大屏上的全屏页面的自适应适配方案,该篇文章有一整套解决方案，经过测试是可以实现的大屏完全展示，效果实现和参考文章内的demo效果是一样的
参考资料:
大屏上的全屏页面的自适应适配方案
vue3.0中使用postcss-pxtorem
vue+px2rem实现pc端大屏自适应(rem适配)
