对于初学者而言，如何对页面进行自适应变成了一个老大的难题。
若是按照UI设计稿1920px的宽度进行设计，那对于那些宽度比例比较小的屏幕来说，就只能显示一半，有些朋友为了自适应，往往是对其中的样式定百分比来显示，这样对于不同的电脑而言都能适配，可是这样子各种组件很容易大小比例发生变化，这样的变化并不能满足测试和UI的需求。
下面我说一下我的设计思路，希望能够帮助到各位。
我们可以在代码中进行判断，若是屏幕尺寸大于某个值的，就将页面大小宽度设定为1920px的固定值，若是小于这个值的，我们就可以设置页面内容宽度大小为1200px或者1600px。这样当屏幕的大小到达一个临界点的时候就会由1920的宽度变为1600的宽度。
这样我们就可以直接按照比例填写我们的组件大小px即可。不仅免去了为了自适应屏幕导致百分比组件不符合测试要求的烦恼，更方便我们设定其具体px值大小，使得其内容跟设计稿一模一样。
具体实现步骤如下
- 1.获取到具体屏幕的大小
由于vue中不能用document获取屏幕宽度，用jq我又嫌麻烦，我们可以通过一个函数获取当前屏幕的宽度大小。
<div class="header-components" ref="theRef">
通过挂载的 ref="theRef" 的方式，等等就可以获取这个div的具体数据
包括所占空间的大小等等
为了获取整个项目的大小，建议这个div的宽度设置为100%，这样就可以获取到这个屏幕的宽度了
</div>
//具体操作需要在mouted中实现
mounted () {
const that = this;//保存一下this指向
//获取目前屏幕宽度，通过挂载的方式获取到这个div的宽度
let screenWidth = this.$refs.theRef.clientWidth;
//做判断，判断其是否为临界点
that.isMScreen = screenWidth <= 1519 ? true : false;
this.$store.commit('updateWidth',that.isMScreen)//在vuex保存结果
//监听当前的屏幕变化，若是当前的屏幕发生变化
//就通过window.onresize修改其值，并将其重新存入vuex中
window.onresize = () => {
return (() => {
screenWidth = that.$refs.theRef.clientWidth;
that.isMScreen = screenWidth <= 1519 ? true : false;
this.$store.commit('updateWidth',that.isMScreen)
})();
};
},
需要注意的是，因为window.onresize = ()只能在一个页面促发一次，我们需要全程监听屏幕大小，就需要在一个所有页面都有的组件里监听当前的屏幕变化。这次我在header.vue里面进行监听当前屏幕的宽度。当然你也可以选择每个页面引用一次，反正只要监听到就好。
- 2.将具体屏幕大小引入到页面做判断
这里很简单，引入存在vuex的临界值判断值就好
computed:{
...mapGetters(['bigSum']),//引入vuex的临界值
},
watch:{
'bigSum':{
//监听临界值，弱是发生变化，我们就修改屏幕宽度判断值isMScreen
handler(newValue,oldValue){
this.isMScreen=this.bigSum;
}
}
}
- 3.根据判断对样式进行判断修改。
这里很简单，当屏幕大小达到一个临界值的时候，isMScreen就变化，只要监听isMScreen对div的样式进行判断就可以了。
<div class="downtab_func">
<div class="downtab_func_item"
v-for="(item,index) in todayList" :key="index"
:style="
{float:item.id%2==1?'left':'right',
width: isMScreen ? '224px' : '270px',}">
<!-- style里判断是否到达临界值，若是到达，就切换其样式 -->
<div class="downtab_func_item_text">{{item.text}}</div>
</div>
</div>
当然样式变化多的时候也可以选择变化class
<div :class="[isMScreen ? 'Brand_img_box_min': 'Brand_img_box']">
<img :src="item.src"
:style="{width: isMScreen ?'49px' : '60px',}"
alt=""/>
</div>
当然其实熟练运用三元判断在v-for的遍历是很有必要的，当我们遇到对list做三个一排一行的显示要求的时候，我们就可以轻松面对。