【2017-11-9】CSS 中的媒体查询

通过媒体查询，我们可以实现在不同的设备，不同的屏幕大小，加载不同的样式表，以实现响应式的布局效果。

但是这种设计也存在着一定程度上的缺陷，在适配移动端的时候，大量使用 display:none 隐藏富媒体元素，这样会造成不必要的流量浪费；

1.媒体类型



在实际开发中，最常用的媒体类型也就只有all,print,screen这三种类型。

//根据不同的设备类型，加载不同CSS文件
<link rel="stylesheet" type="text/css" href="css/1.css"  media="all"/>
<link rel="stylesheet" type="text/css" href="css/2.css"  media="screen"/>
<link rel="stylesheet" type="text/css" href="css/3.css"  media="print"/>

//除了可以写入外部文件，也可以直接使用样式表
<style type="text/css">
@media  screen{

}
@media print{

}
</style>

2.媒体特性

媒体查询除了可以根据不同的设备类型去加载不同样式文件，也可以根据不同设备特性去加载不同的CSS样式表；

一般用来根据不同的屏幕尺寸来适配不同的样式。

1.最大宽度Max Width

<link rel="stylesheet" type="text/css" href="css/1.css"  media="(max-width:600px)"/>

//如图：1.CSS 的最大适配屏幕宽度为600px,即当屏幕小于600px时才会加载 1.CSS

2.最小宽度Min Width

<link rel="stylesheet" type="text/css" href="css/1.css"  media="(min-width:600px)"/>

//如图：1.CSS 的最小适配屏幕宽度为600px，即当屏幕大于600px时才加载 1.CSS

3.多特性同时使用

<link rel="stylesheet" type="text/css" href="css/1.css"  media="(min-width:600px) and (max-width:900px)"/>

//如图：多特性同时使用，当屏幕大小大于600px小于900px的时候，加载 1.CSS

4.min-device-width 与 max-device-width

代表的屏幕可见区域的最大值与最小值，与Max Width Min Width类型相似

5.not关键字，用来排除某种特性，相当于“非”

<link rel="stylesheet" type="text/css" href="css/1.css"  media="not screen and (min-width:600px)"/>

//如图：适配1.CSS的最小屏幕宽度为600px，加上not之后就会变成，适配1.CSS的最大屏幕宽度为600px;

6.only关键字
only用来定某种特定的媒体类型；

@media only screen and (min-width: ) {

}
//如图：only screen 用来规定媒体类型为 screen