在前端vue3 开发媒体查询代码 实现 响应式布局（js 和css 方式）

在Vue 3中，可以使用Composition API结合媒体查询来创建响应式布局。以下是一个使用JavaScript和CSS媒体查询实现响应式布局的简单例子：

<template>
  <div :class="{ 'container': !isMobile, 'container-mobile': isMobile }">
    <!-- 内容 -->
  </div>
</template>
 
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
 
const isMobile = ref(false);
 
function handleResize() {
  isMobile.value = window.innerWidth < 768;
}
 
onMounted(() => {
  handleResize(); // 初始调用
  window.addEventListener('resize', handleResize);
});
 
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
</script>
 
<style>
.container {
  display: flex;
  /* 其他样式 */
}
 
.container-mobile {
  display: block;
  /* 移动设备的样式 */
}
 
/* CSS媒体查询 */
@media (max-width: 767px) {
  .container {
    /* 移动端容器样式 */
  }
}
</style>

在这个例子中，我们定义了一个响应式的引用变量isMobile，它会在窗口宽度小于768像素时被设置为true。handleResize函数会在组件挂载时调用，并且在窗口大小变化时被调用，以更新isMobile的值。同时，我们使用了CSS媒体查询来定义在不同屏幕尺寸下的容器样式。这样，我们就可以根据isMobile的值来切换不同的容器类名，实现响应式布局。