vue如何做浏览器大小适配

vue实现全屏登录视频背景并适配浏览器窗口大小

问题描述：接到一个需求，需要把登录页背景做成一个全屏的视频播放，并且能够根据浏览器窗口大小做到实时适配。

1.HTML结构。首先用一个最外层容器包裹整个登陆页面，最外层容器使用flex布局，有利于窗口和浏览器比例大小发生改变盒子伸缩以及登录容器实现水平垂直居中显示，视频背景盒子使用固定定位在整个页面容器，设置z-index使其层级最低。

2.css样式部分。最外层容器使用flex布局方便登录模块实现水平垂直居中显示，视屏容器和背景图片使用fixed固定定位使其脱离文档流占据整个屏幕大小，设置层级为最低。

3.js适配部分。当页面元素渲染后给窗口添加监听，屏幕尺寸发生改变时实时给播放器设置样式使其达到适配效果