前端大屏展示框架搭建(三)

大屏全屏页面等比例缩放的实现

等比缩放页面,是大屏开发里比较常用的方式了。一般设计图按大屏的尺寸设计,按尺寸开发,最后等比缩放。

大屏等比缩放,我这里在layout.vue里面做控制。

layout.vue

主要是在 app-wrapper 所在div进行scale。


scale的比例按照实际屏幕宽与1366的比例计算,如果设计图是按照别的尺寸做的,例如 1920x10803840*2160(4K)屏等等,在下面代码的 resize_window 方法设置对应宽度就行。

代码如下:


以上,遇到1366x768比例的大屏,基本可以自动缩放,适合做大屏幕的展示。

工程代码

整个项目的代码在下面地址,参考commit就懂过程了

大屏开发框架工程代码

你可能感兴趣的:(web前端,visual,studio,code,vue.js,前端,javascript)