媒体查询

什么是媒体查询？

CSS媒体查询，提供一种应用CSS方法，仅当你的浏览器或设备环境与你指定的规则相符合时CSS才会真的被应用；

如何使用媒体查询以及用它建立响应式设计的常见方法

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

• 一个媒体类型，告诉浏览器这段代码是用在什么类型的媒体上；

1. all
2. screen
3. print---页面被打印时
4. speech

• 一个媒体特征规则（媒体表达式），是一个被包含的CSS生效所需要通过的规则或测试;最常用的是视口宽度

1. max-width
2. min-width
3. width
4. 设备朝向orientation：portrait mode（竖放） || landscape mode（横放）

• 一个CSS应用规则，测试通过且媒体类型符合时，生效