问题前提:
最近在编写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){}
但是此方案,对我的项目起不到作用,只做思路提供使用