共计 3998 个字符，预计需要花费 10 分钟才能阅读完成。
什么是媒体查问
咱们晓得，咱们给网页 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…
