媒体查询之@media

什么是媒体查询

媒体查询（Media queries）可以针对不同的媒体类型、不同尺寸的可视区域（viewport）等设置不同的样式。以“给不同尺寸的可视区域设置不同的样式”为例，实际上是根据可视区域宽高的不同，给每一个尺寸定制一套样式：当可视区域宽度小于300时，设置页面背景为蓝色；当可视区域宽度大于等于300并小于600时，设置页面背景为绿色...
为了理解“媒体查询”，我把它分成“媒体”和“查询”两部分。“媒体(media)”对应媒体类型，诸如打印机、电脑屏幕这样的设备；而“查询（queries）”对应着一系列的条件或者说设备信息，比如，可视区域宽度小于300px。当满足“媒体”、“查询”的条件时，则应用我们自定义的css样式。
在CSS中，使用@media可以给媒体查询的结果设置样式。

语法

媒体查询由四部分组成：
(1) @media
(2) 媒体类型
(3) 逻辑操作符
(4) 媒体特性

@media 媒体类型 逻辑操作符 (媒体特性) {
    CSS代码
}

其中，@media是必不可少的，而媒体类型、逻辑操作符、媒体特性都是可选的，例如：

/*【1】包含了媒体类型screen、逻辑操作符and、媒体特性min-width:300px*/
@media screen and (min-width:300px){
   /*CSS代码*/
}

/*【2】仅包含媒体类型print*/
@media print{
   /*CSS代码*/ 
}

/*【3】仅包含媒体特性min-width:300px*/
@media (min-width: 300px)

媒体类型

• all 用于所有设备
  
• print 用于打印机和打印预览
  
• screen 用于电脑屏幕、平板电脑屏幕、智能手机屏幕
  
• speech 应用于屏幕阅读器等发声设备
  

逻辑操作符

and

使用and把多个媒体查询规则（媒体类型、媒体特性）组合成一条媒体查询，当每一个规则都为真时，则应用该条媒体查询。

@media screen and (min-width:300px) and (max-width:900px){
    body{
        background-color: blue;
    }
}
/*当满足如下条件时，把页面背景设置为蓝色：
 （1）媒体类型为screen
  (2)screen的宽度不小于300px
  (3)screen的宽度不大于900px
*/

not

使用not，表示当不满足not后面的规则（媒体类型、媒体特性）时，才应用该条媒体查询。注意，如果你要使用not，那么必须指定媒体类型。

@media not print and (max-width:900px){
    body{
        background-color: blue;
    }
}
/*当满足如下条件时，把页面背景设置为蓝色：
 （1）媒体类型不为print
  (2)屏幕的宽度不超过900px
*/

only

旧版本的浏览器遇到不支持的媒体特性时，会默认该媒体特性为真。only可以阻止旧版本浏览器的这一默认行为。使用only意味着：只有媒体查询中所有的规则都为真时该条媒体查询才为真，旧版本浏览器遇到不支持的媒体特性时将忽略整条媒体查询。注意，如果你要使用only，那么必须指定媒体类型。

@media only screen and (max-width:900px){
    body{
        background-color: blue;
    }
}
/*只有当满足如下所有条件时，才把页面背景设置为蓝色，不允许旧版本浏览器兼容：
 （1）媒体类型为screen
  (2)屏幕的宽度不超过900px
*/

, (逗号)

逗号用于把多条媒体查询合并为一个媒体查询列表，列表中的每一个媒体查询都独立于列表中的其它媒体查询。只要该列表中有一条媒体查询为真，该媒体查询列表对应的css代码就会被应用。逗号的行为就像是逻辑运算符or。

@media screen, print{
    body{
        background-color:blue;
    }
}

媒体特性

媒体特性必须被括号包围。下面介绍两个最常用的特性：

height

height的值为可视区域（viewport）的高度。还可以使用 min-height 和 max-height 来设置最小高度、最大高度。

/*设置准确的高度值*/
/*当可视区域的高度为300px时，设置div的字体颜色为blue*/
@media (height: 300px){
    div{
        color: blue
    }
}

/*设置最小高度*/
/*当可视区域的高度大于25rem时，设置div的背景色为green*/
@media (min-height: 25rem){
    div{
        background: green
    }
}

/*设置最大高度*/
/*当可视区域的高度小于40rem时，设置div的边框颜色为red*/
@media (max-height: 40rem){
    div{
        border: red
    }
}

width

width的值为可视区域（viewport）的宽度，还可以使用 min-width 和 max-width 来设置最小宽度和最大宽度。

/*设置准确的高度值*/
/*当可视区域的宽度为300px，设置div的字体颜色为blue */
@media (width: 300px){
    div{
        color: blue;
    }
}

/*设置最小宽度*/
/*当可视区域的宽度大于35rem时，设置div的背景颜色为green */
@dedia (min-width: 35rem){
    div{
        background: green;
    }
}

/*设置最大宽度*/
/*当可视区域的宽度小于50rem时，设置div的边框为red */
@media (max-width: 50rem){
    div{
        border: red
    }
}

更多的媒体特性请前往MDN查看。

参考文档
（1）https://www.runoob.com/cssref/css3-pr-mediaquery.html
（2）https://www.w3cplus.com/css/css-media-queries-guide.html
（3）https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries#%E5%9C%A8_html_%E4%B8%AD%E4%BD%BF%E7%94%A8%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2