什么是媒体查询
我们知道，我们给网页HTML写样式用的主要是CSS（层叠样式表）语言的规则，比如：盒模型设置宽高背景色什么的。
目前我们使用的最新版本的层叠样式表主要是CSS第三版，也就是CSS3，CSS3带来的新特性、新功能有很多，比如：圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、媒体查询等等。
所以，什么是媒体查询呢？媒体查询就是CSS3带来的新的功能特性
一般认为媒体查询是CSS3的新增内容，实际上CSS2就已经有媒体查询了，只不过css3又增加了新功能使其更加强大，从而让媒体查询发扬光大
媒体查询的功能
功能就是：
CSS3中新特性媒体查询（mediaqueries），可为根据不同的分辨率（设备）设置不同的样式效果
之前css2中定义的设备有tv设备、tty设备、屏幕screen设备、打印机print设备等等。到css3中基本上废弃了很多用不到的设备，基本上只保留screen设备、print设备这样的。print设置偶尔使用，比较常用的就是screen设备。
print设备我们可以通过
Ctrl+P快捷键预览一下打印的效果
简而言之，媒体查询主要是用来做响应式布局的
什么是响应式布局
响应式布局就是：我们做好的页面，在不同尺寸的屏幕上有不同的样式效果回馈。比如，在大屏幕上我们需要更多的展示信息，毕竟屏幕大嘛，信息展示少了就浪费了。在小屏幕上，我们需要隐藏一些东西，因为屏幕太小了，信息展示多了反而显得过于臃肿。不同屏幕有不同的相应，即为响应式布局
比如有这样一个需求：在可视区域屏幕的宽度小于480像素时，我们让屏幕中文字由原来的黑色black变成绿色green。（默认是黑色）
使用js解决
思路：通过screen对象，获取屏幕分辨率的宽度width，进行判断，若小于480的时候，就改变文字的颜色。
打印screen对象的信息
Screen对象可以获取浏览器窗口的相关数据，比如分辨率、屏幕大小之类的数据，可以通过window.screen获取到，同时Screen也自带一些方法可以做其他事情，比如解锁或锁定屏幕转向等。具体关于screen对象的详细信息，欢迎访问MDN官方网址：https://developer.mozilla.org...
对应代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="meiti">哈喽，我是媒体查询</div>
<script>
window.onresize = () => {
console.log(screen.width); // 打印看看screen对象信息
// 通过js去控制
if (screen.width <= 480) {
document.querySelector('div').style.color = "green"
document.querySelector('div').style.fontWeight = "bolder"
} else {
document.querySelector('div').style.color = "black"
document.querySelector('div').style.fontWeight = "normal"
}
}
</script>
</body>
</html>效果图
使用媒体查询解决
代码
<style>
/* 使用媒体查询，去设置样式更加方便 */
@media screen and (max-width: 480px) {
div {
color: green;
font-weight: bolder;
}
}
</style>当，是屏幕设备，并且，最大宽度不超过480px的时候，让文字的颜色变成绿色加粗字体
max-width最大宽度，也就是小于等于的时候
min-width最小宽度，也就是大于等于的时候
效果图和上图一样的，就不再附图了。
二者对比
通过上述的例子，我们发现的确是媒体查询在书写的过程中更加方便，一方面js要尽量少操作dom，尽量减少回流重绘，在一个通过css控制样式的确是比通过js操作样式更加节省性能。所以综上所述，css3带来的新特性，媒体查询的确是有一定的应用场景
媒体查询语法
媒体设备类型
直接写在style标签里面，目前比较常用的是四种设备，其实是三种，如下：
<!-- 指定屏幕设备 -->
<style media="screen"></style>
<!-- 指定打印机设备 -->
<style media="print"></style>
<!-- 指定屏幕阅读器设备 -->
<style media="speech"></style>
<!-- 指定所有设备，相当于公共的样式了 -->
<style media="all"></style>引入的话，也可以通过重置样式表引入，如下：
<!-- 指定屏幕设备 -->
<link rel="stylesheet" href="css/style.css" media="screen">
<!-- 指定打印机设备 -->
<link rel="stylesheet" href="css/style.css" media="print">
等 ......还可以通过@import引入并指定媒体插叙语法，如下：
<!-- 当屏幕的宽度大于360px的时候，就使用 one.css 文件里面所书写的样式 -->
@import url(./one.css) (min-width:360px);
<!-- 当屏幕的小于880px的时候，就使用 two.css 文件里面所书写的样式 -->
@import url(./two.css) (max-width:880px);逻辑运算符之三个关键字and 、not和only
and关键字（且）
and表示并且的意思，需要同时满足 and前和and后 的两个条件，才会执行对应的媒体查询语句，比如：@media screen and (max-width: 480px) { 相应css语句 }
意思如下：
@media
- 表示：使用媒体查询
screen
- 表示：屏幕设备（比如电脑手机什么的），也可以不写，不写的话，默认就是屏幕screen 设备，不写screen 语法如下：
@media (max-width: 480px) { 相应css语句 }效果是一样的，只不过省去默认值罢了
and
- 表示：且 的意思，and后面一般会跟限定条件，表示在什么条件下才会触发相应的媒体查询的样式。可以写多个and，表示多个条件的意思，举例子
@media screen and (max-width: 480px) and (min-width: 360px) { 相应css语句 }- 上述案例的意思是：当为屏幕设备的时候，且屏幕宽度大于360像素，小于480像素的时候，执行相应的css语句
(max-width: 480px)
- 条件的话用括号来包裹，括号里写上相应的条件语句，这里的意思是最大宽度不能超过480px，也就是小于等于的意思
{ 相应css语句 }
- 实现对应样式效果的语句
not关键字（非）
not关键字就是取反的意思，要放在@media后面，其他的语句前面，如下案例：
<style>
/* 小于等于360px的变成绿色加粗字体 */
/* @media screen and (max-width: 360px) { */
/* 加上not取反就是表示 就变成大于360px的变成绿色加粗字体了 */
@media not screen and (max-width: 360px) {
div {
color: green;
font-weight: bolder;
}
}
</style>only关键字 （仅）
支持媒体查询语法就使用对应媒体查询语法，不支持就忽略。如下：@media only screen and (max-width: 360px) { css语句 }
这种写法使用很少，毕竟目前只有低版本浏览器才不支持，图示一下，相应浏览器从什么时候开始支持的
由上图我们可以看到，的确是比较低版本的浏览器才不支持，谷歌浏览器21版本，这个是很多年以前的版本了......
补充 （或） 关键字（使用逗号 , 隔开即可）
如果我们有这样的一个需求：当屏幕的宽度小于360px或者屏幕的宽度大于480px的时候，才让字体变成绿色加粗样式
此时，我们就需要使用或的语法，代码如下：
<style>
@media
screen and (max-width: 360px) , /* 多个或的条件使用逗号隔开就行了 */
screen and (min-width: 480px) {
div {
color: green;
font-weight: bolder;
}
}
</style>完整语法
@media not或only或不写 mediatype或不写（不写就默认screen） and ( mediafeature媒体特性 ) {
相应css语句
}媒体特性就是限制条件，在什么条件下，才使用 相应的书写的css语句
常用的媒体特性
max-height
- 最大高度，即 小于等于这个高度的意思
min-height
- 最小高度，即 大于等于这个高度的意思
max-width
- 最大宽度，即 小于等于这个宽度的意思
min-width
- 最小宽度，即 大于等于这个宽度的意思
媒体特性其实有很多，具体的使用什么特性根据项目实际情况。最后再附上官方的媒体查询网址
附录官网
W3school的媒体查询： https://www.w3school.com.cn/c...
MDN的媒体查询： https://developer.mozilla.org...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。