这是媒体查询

什么是媒体查询

背景

近几年整个社会发生了翻天覆地的变化，各种智能手机，pad，之类的移动端设备随处可见。那么，程序员界就刮起了一阵风暴，大家在思考 “ 如何让我们的网站在各种移动端设备上都能布局合理呢？ ”为每一个设备写一套代码自然是非常麻烦的。那么，聪明的程序员们想到了一个办法，“ 我只要一套代码，就能让我的网站在不同大小的设备上正确显示 ”。于是，响应式设计模型诞生啦！其核心就是“媒体查询”技术。

介绍

1.媒体查询（Media Query）是CSS3新语法。
2.使用 @media查询，可以针对不同的媒体类型定义不同的样式
3.@media 可以针对不同的屏幕尺寸设置不同的样式
4.当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
5.目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

媒体查询的使用

组成

mediatype 查询类型

将不同的终端设备划分成不同的类型，称为媒体类型

注（第四个属性值）： speech 适用于屏幕阅读器

关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

1. and：可以将多个媒体特性连接到一起，相当于“且”的意思。

2. not：排除某个媒体类型，相当于“非”的意思，可以省略。
   使用not关键字来排除某种所指定设备类型，排除后面表达式中的媒体类型。not表现的效果就是“非”，对后面跟着的表达式进行否定定义。

3. only：指定某个特定的媒体类型，可以省略。
   only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。

媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。

媒体特性（拓展属性——了解）

媒体查询语法规范

1. 用 @media开头 注意@符号
2. mediatype 媒体类型
3. 关键字 and not only
4. media feature 媒体特性必须有小括号包含

@media screen and (min-width: 480px) {
  html {
    font-size: 32px;
  }
}