vue 适应屏幕大小：获取窗口宽度，调整样式类名

<div style="float:left" :class="screenWidth > 1680 ? 'addrInput' : 'short_input'">

data(){
    return {
	 screenWidth: document.body.clientWidth,
	 timer: null,
 	};
 },
watch: {
   // 适应屏幕大小
   screenWidth(val) {
     if (!this.timer) {
       this.screenWidth = val;
       this.timer = true;
       const that = this;
       setTimeout(function() {
         that.timer = false;
       }, 20);
     }
   }
 },
mounted() {
   const that = this;
   window.onresize = () =>
     (() => {
       window.screenWidth = document.body.clientWidth;
       that.screenWidth = window.screenWidth;
     })();
 },


<style lang="scss" scoped>
	.addrInput /deep/.el-input__inner,
	.addrInput /deep/.el-input {
	  width: 400px !important;
	}
	.short_input /deep/.el-input__inner,
	.short_input /deep/.el-input {
	  width: 250px !important;
	}
</style>

只是举例，更好的是做项目rem适配，如果单个页面这么写就行。