什么是媒体查问

咱们晓得，咱们给网页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...