@media媒体查询

媒体查询（media Query）是CSS3新语法

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

1. 语法规范

@media mediatype and | not | only ( media feature ) {

CSS-Code;

}

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

1. 1. mediatype 查询类型

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

all                                     用于所有设备

print                                   用于打印机或打印预览

screen                                  用于电脑屏幕、平板电脑、智能手机等

1. 1. 关键字

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

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

not                                     排插某个媒体类型，相当于 “非” 的意思，可以省略

only                                    指定某个特定的媒体类型，可以省略

1. 1. 媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格，注意他们要加小括号包含

width                                       定义输出设备中页面可见区域的宽度

min-width                                   定义输出设备中页面最小可见区域宽度

max-width                                   定义输出设备中页面最大可见区域宽度

1. 1. 引入资源

当样式比较繁多的时候，我们可以针对不同的媒体使用不同 stylesheets (样式表)

原理：就是直接在 link 中判断设备的尺寸，然后引用不同的 css 文件

<link rel=”stylesheet” media=”mediatype and | not | only (media feature)” href=”mystylesheets.css”>