vue中使用媒体查询

在Vue中使用媒体查询，可以通过给对应的DOM元素添加class来实现。首先，在CSS中定义好媒体查询的样式，然后在Vue组件中通过绑定class的方式将对应的样式应用到DOM元素上。

例如，在CSS中定义一个@media查询样式：

@media screen and (max-width: 768px) {
.mobile {
font-size: 16px;
color: red;
}
}

然后，在Vue组件中使用:class绑定将该样式应用到DOM元素上：

<template>
<div :class="{'mobile': isMobile }">Hello World</div>
</template>

<script>
export default {
data() {
return {
isMobile: false
}
},
mounted() {
window.addEventListener('resize', this.handleResize)
this.handleResize()
},
methods: {
handleResize() {
this.isMobile = window.innerWidth <= 768
}
},
destroyed() {
window.removeEventListener('resize', this.handleResize)
}
}
</script>

以上代码中，我们监听了窗口大小的变化，然后通过判断窗口宽度是否小于等于768来决定是否添加.mobile这个class。