vue根据屏幕大小设置css样式（实时监控屏幕大小）

pc端当屏幕缩小时总会有些css样式不适配
以下代码可以实时监测屏幕大小

下面展示一些 内联代码片。

// 需要动态修改的css
<div :class="isWidth ? 'title' : 'title2'">11111</div>

// 定义一个变量
return {
    
    
	data(){
    
    
		screenWidth:document.body.clientWidth, // 屏幕宽度
		isWidth: false // 动态修改css控制变量
	}
}

// 定义一个方法
methods: {
    
    
	setClient(){
    
    
		this.screenWidth = document.body.offsetWidth
		console.log(this.screenWidth) //可以打印考到窗口大小变化
		if (this.screenWidth < 1280) {
    
    // 1280是你想控制的屏幕大小临界值，可根据自己需求修改
			this.isWidth = false
		} else {
    
    
			this.isWidth = true
		}
	}
}

// 实时监控宽度
watch: {
    
    
	screenWidth(val){
    
    
		this.screenWidth = val
	}
}