vue 屏幕适配插件

npm下载

npm install vue-container-query --save

各个屏幕的值

<template>
  <container-query
    :query="query"
    v-model="params"
    @change="handleChange"
  >
    <pre class="app">{{ params }}</pre>
  </container-query>
</template>

<script>
import { ContainerQuery } from 'vue-container-query'

const query = {
    'screen-xs': {
        maxWidth: 575
    },
    'screen-sm': {
        minWidth: 576,
        maxWidth: 767
    },
    'screen-md': {
        minWidth: 768,
        maxWidth: 991
    },
    'screen-lg': {
        minWidth: 992,
        maxWidth: 1199
    },
    'screen-xl': {
        minWidth: 1200,
        maxWidth: 1599
    },
    'screen-xxl': {
        minWidth: 1600
    }
}

export default {
  components: { ContainerQuery },
  data () {
    return { query, params: {} }
  },
  methods: {
    // 每次屏幕发生变化都会执行改方法
    handleChange () {}
  }
}
</script>