vue动态修改页面分辨率

问题前提：

           最近在编写vue项目的过程中，需要做屏幕自适应,但是使用的组件里面强制需要给一个height高度,否则不生效，查到很多资料，发现了如下的几种方法:

1.动态给定样式

<div class="tab-content" v-bind:style="{ height: userListH + 'px' }" >

</div>

然后使用vue的mounted方法给定这个div的大小

            GetWindowInfo(){
			    this.userListH = document.body.clientHeight - 80;
			 }

            mounted (){
			this.GetWindowInfo();
		     }

最后使用注册监听机制，动态改变其大小：

        created(){
			 window.addEventListener('resize', this.GetWindowInfo); //注册监听器
			 this.GetWindowInfo();
		 },
		 destroyed(){
			  window.removeEventListener('resize', this.GetWindowInfo)
		 }

2.使用媒体查询(medio)

/*屏幕大于1200排序（大屏幕电脑）*/ 
@media screen and (min-width: 1200px){}
/*屏幕在1024px到1199之间（中屏幕电脑）*/
@media screen and (min-width: 1024px) and (max-width: 1199px){}
/*屏幕在768px到1023之间（小屏幕-pad）*/ 
@media screen and (min-width: 768px) and (max-width:1023px){} 
/*屏幕在480px到768之间（主要是手机屏幕）*/ 
@media screen and (max-width: 768px){} 

但是此方案，对我的项目起不到作用，只做思路提供使用