在上一篇文章中 我介绍了一下 媒体查询的知识以及概念
我只介绍了在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媒体查询
我直接上代码了
这就是目前的 监听的宽度
如果我们是实现不同屏幕的显示组件
可以创建组件
在不同的宽度下 显示不同的 组件 对的
就是这样的布局逻辑
