CSS的媒体查询

媒体查询，顾名思义就是查询将要应用样式表的媒体，满足查询的条件，就会应用该样式表。

语法

• 在HTML中
  可以在link和style标签中使用，‘,’ 逗号可以理解or，也就是两个媒体中满足一个就可应用这个样式表，and后面附加的是该媒体的属性。

<link rel="stylesheet" href="./red.css" media="媒体类型 and (媒体属性),媒体类型 and (媒体属性)">
<style media="媒体类型 and (媒体属性),媒体类型 and (媒体属性)"></style>

• CSS中使用
  1.@media 媒体类型 and (媒体属性){
  CSS代码
  }
  2.@import url(外部引用的CSS路径) 媒体类型 and (媒体属性)

@media screen and (min-width:900px){
    body{
        background-color: aqua;
    }
} 
@import url('./blue.css') screen and (min-width:900px);

• 注意
  媒体查询也需要注意样式的优先级（就是CSS优先级）
• 媒体类型
  包括screen，print，all，speech，分别对应'文档的屏幕媒体'，'文档的打印预览'，'所有能呈现内容的媒体'，'语音合成器、屏幕阅读器等'。
• 逻辑关键字
  1.and，该关键字后面添加该媒体类型的媒体属性，所有属性满足才会应用该样式表
  2.not，必须放在媒体查询前面，所有属性满足，不应用该样式表。其余情况全部应用。

@import url('./blue.css')  not screen and (min-width:900px);

3.only，在不支持媒体查询的旧浏览器中隐藏样式表,必须放在媒体查询前面

@import url('./green.css') only screen and (min-width:900px);

待补充（媒体属性）