vue 不是常用分辨率的前端大屏适配
最近公司有个需求,需要在一块1920X1620的大屏上全屏做一个可视化页面,设计稿也是按照1920X1620做的,但是投屏电脑的分辨率是1920X1080,且自定义电脑分辨率投屏大屏不支持投放,这可咋整呀。
既然投屏上去会被拉升,那就把它做成扁的,然后拉升就行了,最开始想的解决方案是开发页面的时候把高度都按照比例缩小写,但这显然不对,一是修改工作量大,最重要的问题是自定义组件,比如echarts等其它可视化组件无法适配,因为图例是自动生成的。还有最重要的一个点文字会被拉长,就会非常难看。
后来公司大哥大想出了解决方案,先按照正常比列写,然后将整个页面上下通过transform压缩,就完美了,具体代码如下:
外层:
#app {
.wh(100vw,1080px);
overflow: hidden;
// 如果不使用,页面不会顶到最上面,会使上方出现空白,使用align-items可以让容器居中。
display: flex;
align-items: center;
}
内部:
.home {
.wh(100vw,1620px);
transform: scaleY(0.666667);
}
注意:
弹窗也放在app中,才会显示正常,不要使用append-to-body
<el-dialog class="business" :visible.sync="dialogVisible" :modal-append-to-body='false'
:modal='true':close-on-click-modal='true' :before-close="cancel" v-if="dialogVisible">