在上一篇文章中 我介绍了一下 媒体查询的知识以及概念

我只介绍了在html css3 中的使用方式以及书写

下面我来简单来演示一下 在vue3 中怎么使用这个 其实都一样的 只是.vue 的文件

我用的是ant-design-vue3 的前端web端框架 用这个来演示

一. css样式媒体查询

目前的框架 是这样的

在一个vue的文件中来演示这个问题

如果 这样来写的话 我们为了 代码更加 清晰 就拿 三种 来写

① 按照从大到小的或者从小到大的思路
② 注意我们有最大值 max-width 和最小值 min-width都是包含等于的
③ 当屏幕小于540像素， 背景颜色变为蓝色 （x <= 539）
④ 当屏幕大于等于540像素 并且小于等于 969像素的时候 背景颜色为 绿色 ( 540=<x <= 969）
⑤ 当屏幕大于等于 970像素的时候，背景颜色为红色 （ x >= 970）

其实这样代码很简单的

就是 一样的写法

二. js媒体查询

我直接上代码了

这就是目前的 监听的宽度 

如果我们是实现不同屏幕的显示组件

可以创建组件

在不同的宽度下 显示不同的 组件 对的

就是这样的布局逻辑