利用@media only screen实现网页布局的自适应

  通过@media only screen and去监听屏幕的大小，当屏幕宽度范围在1200px以上时，展示

<div class="pc"></div>的内容，pad和mobile端的内容会隐藏。

• 优点：可以根据屏幕尺寸大小，实现想要的效果

• 缺点：代码会存在冗余

<template>
  <div>
    <div class="pc"></div>
 <div class="pad"></div>
    <div class="mobile"></div>
  </div>
</template>

<style lang="scss" scoped>
//pc端
@media only screen and (min-width: 1200px) {
  .pc {
    display: block !important;
  }
  .pad {
    display: none !important;
    touch-action: auto !important;
  }
  .mobile {
    display: none !important;
    touch-action: auto !important;
  }
}

//pad端
@media only screen and (min-width: 768px) and(max-width: 1199px) {
  .pc {
    display: none !important;
  }
  .mobile {
    display: none !important;
    touch-action: auto !important;
  }
  .pad {
    display: block !important;
    touch-action: auto !important;
  }
}

// 手机端
@media only screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
  .mobile {
    display: block !important;
    touch-action: auto !important;
  }
  .pad {
    display: none !important;
    touch-action: auto !important;
  }
}
</style>

动态监听屏幕宽度（拓展）

  利用@media only screen可以实现网页布局的自适应，那么当布局动态的变化时要如何去监听屏幕的宽度，来定义想要的弹窗表格等尺寸嗯？

  结合@media only screen的拓展代码如下：

<template>
  <div>
    <div class="pc"></div>
 <div class="pad"></div>
    <div class="mobile"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
     // 首先在data中定义要监听的属性，因为watch侦听器监听的是data中的属性,不能直接监听window   
     // 当前屏幕的宽度
      screenWidth: document.body.clientWidth, 
  },
  // 通过computed，可以对参数进行计算，并返回一个值，且组件可以将该方法当成一个值引用
  // 如： <el-dialog  :width="getWidth80p"></el-dialog>
  // 该处仅做拓展,按需使用
  computed: {
    getWidth80p: function () {
      let width = document.body.clientWidth * 0.85
      return width + 'px'
    }
  },
   watch: {
   // 监听screenWidth的值，其中val为改变后的值
    screenWidth(val) {
      this.dragWidth = "'" + val * 0.8 + "px'"
    }
   },
   mounted() {
    const that = this
    // 当屏幕动态的进行拖拽放大时，可以动态的获取到将修改的值赋值给screenWidth,搭配watch监听
    // 可以实现动态拉伸窗口大小时，对屏幕宽度进行动态获取，从而可以根据屏幕宽度来进行百分比的控制
     window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
      })()
    }
  },
}
</script>

<style lang="scss" scoped>
//pc端
@media only screen and (min-width: 1200px) {
  .pc {
    display: block !important;
  }
  .pad {
    display: none !important;
    touch-action: auto !important;
  }
  .mobile {
    display: none !important;
    touch-action: auto !important;
  }
}

//pad端
@media only screen and (min-width: 768px) and(max-width: 1199px) {
  .pc {
    display: none !important;
  }
  .mobile {
    display: none !important;
    touch-action: auto !important;
  }
  .pad {
    display: block !important;
    touch-action: auto !important;
  }
}

// 手机端
@media only screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
  .mobile {
    display: block !important;
    touch-action: auto !important;
  }
  .pad {
    display: none !important;
    touch-action: auto !important;
  }
}
</style>