vue 响应式布局

对于初学者而言，如何对页面进行自适应变成了一个老大的难题。

若是按照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做三个一排一行的显示要求的时候，我们就可以轻松面对。