媒体查询
- 语法
- 应用场景

媒体查询

媒体查询 -n一种特殊的判断语句，通过媒体类型和属性来判断规则是否应用。类比for语句的判断条件。

语法

媒体类型

all：适合所有的媒体
screen：屏幕设备
speech：屏幕阅读器
print：打印设备或者是打印为其他格式文件（例如：PDF）

媒体特征属性
抽象出来的媒体属性作为判断条件。必须使用（）包裹。
逻辑符号

关键点1查询语句必须包含媒体类型
例子1

正确：@media not print and (min-width: 500px) {...}
错误：@media not (min-width: 500px) {...}

例子2

//手机竖屏时的css样式。        portrait肖像画，高度大于宽度
@media screen and (orientation: portrait){
    .box1{
        color: red !important;
    }
}
//手机横屏时的css样式。        landscape风景画，宽度大于高度
@media screen and (orientation: landscape){
    .box1{
        color: green !important;
    }
}

关键点2否定的是整个查询语句，而不是单个查询类型
例子

@media not print and (min-width: 500px) {...}
                        等价于
@media not (print and (min-width: 500px)) {...}
错误理解：@media (not print) and (min-width: 500px) {...}

关键点3当查询语句中包含not 和“，”操作符时，not包含的查询语句到逗号为止
例子

@media not print and (min-width: 500px), screen and (max-width: 1000px) {...}
                        等价于
@media not (print and (min-width: 500px)), screen and (max-width: 1000px)  {...}
错误理解：@media not (print and (min-width: 500px), screen and (max-width: 1000px)) {...}) {...}

and
only

关键点1查询语句必须包含媒体类型。
关键点2用来排除不支持媒体特性查询的老浏览器。因为有些旧浏览器仅支持媒体类型，会忽略后面的媒体特性查询，也会应用css样式，这明显不可取，需要排除不支持完整媒体查询的浏览器。
例子

@media screen and (min-width: 500px) {...}
旧的浏览器不支持响应式设计，也会应用该样式。解决方法：only只有当浏览器支持整个媒体查询，才会应用样式。
@media only screen and (min-width: 500px) {...}

，（逗号）：相当与or

应用场景
在css中
@import
@media

在html中

作为标签的media属性

在js中

调用window.machMedia( )媒体查询事件接口，创建一个MediaQueryList对象，可以使用这个对象来查看媒体查询结果，或者绑定监听事件。

例子

var obox1 = document.getElementsByClassName('box1')[0];
var mql = window.matchMedia('(min-width: 1200px)');
mql.addEventListener('change', (e) => {
  if(e.matches){
    obox1.style.color = 'green';
  }else{
    obox1.style.color = 'red';
  }            
})

媒体查询

媒体查询

语法

应用场景