简单使用媒体查询@media

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

那媒体查询该如何使用呢？

一、铺垫

1.首先我们在使用 @media 的时候需要先设置下面这段代码，来兼容移动设备的展示效果：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
width = device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认设置为1.0，即代表不缩放）
user-scalable：用户是否可以手动缩放（默认设置为no，不放大缩小页面）
2：加载兼容文件JS

因为IE8既不支持HTML5也不支持CSS3 @media ，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：

<!--[if lt IE 9]>
　　<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
　　<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
if 判断，假如是ie9,则加载这两个兼容IE9的JS文件，不是的话就注释这两段js文件
3：设置IE渲染方式默认为谷歌(可选)

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

这段代码后面加了一个chrome=1，如果用户的电脑里安装了 chrome，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，如果没有安装，就显示IE最新的渲染模式。

二、css3语法

1.内部样式语法

@media  mediatype  and/not/only  (media feature) { CSS-Code }

如何理解@media的语法规则：

使用媒体查询必须是以 @media 开头；

然后指定设备类型（媒体类型mediatype）；

接着是括号()里的规定媒体/设备特征（media feature），媒体特征的书写格式与css样式类似，都是属性名：属性值（例如min-width：200px）；

最后跟着的大括号{ css-code }，里面放置的是要设置的css样式。

逻辑运算符：

　　not：用来排除某种设备。比如，排除打印设备 @media not print；

　　only：用以指定某特定媒体设备。对于支持 Media Queries 的移动设备来说，如果存在 only 关键字，移动设备的 Web 浏览器会忽略 only关键字并直接根据后面的表达式应用样式文件。对于不支持 Media Queries 的设备但能够读取 Media Type 类型的 Web浏览器，遇到 only 关键字时会忽略这个样式文件。

　　all：适用于所有的设备类型；

　　and：媒体查询中使用来连接多种媒体特性,一个媒体查询中可以包含0或多个表达式，表达式可以是0或多个关键字，以及一种媒体类型。

如：

@media (min-width: 600px) and (max-width: 700px) {

    /** 窗口宽度在600-700像素的样式 **/

}

@media (not max-width: 600px) and (max-width: 700px) {

    /** 窗口宽度在600-700像素的样式 **/

}

2.link标签引用样式

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

定义媒体查询的部分放在<link>标签内，用media属性标注，media="  媒体类型  and/not/only（媒体特性）"

3.媒体类型（mediaType ）

类型有很多，在这里不一一列出来了，只列出了常用的几个。

值	描述
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等。（最常用）
speech	应用于屏幕阅读器等发声设备

4.媒体查询中最常用的媒体特性（media feature）

特性名	值	应用场景
width  min-width  max-width	显示区域的宽度（对打印机而言是打印表面）	改变布局以适应非常窄（如手机）或非常宽的显示器。
height  min-height  max-height	显示区域的高度	改变布局以适应非常长或非常短的显示器
device-width  min-device-width  max-device-width	当前计算机或设备屏幕的宽度 （或打印输出时纸面的宽度）	根据不同设备（如手机）调整布局
device-height  min-device-height  max-device-height	屏幕或纸面的高度	根据不同设备（如手机）调整布局
orientation	landscape（横向）或portrait（纵向）	根据设备的朝向调整布局
device-aspect-ratio  min-device-aspect-ratio  max-device-aspect-ratio	显示区域的宽高比（1/1是正方形）	根据窗口形状调整样式（问题可能比较复杂）
color  min-color  max-color	屏幕颜色的位深 （1位表示黑白，目前主流显示器都是24位）	检查是否支持彩色输出（比如是不是黑白打印），  或者支持的颜色数量

虽然有这么多媒体特性，但目前最流行最常用的是如下几个：

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

！注意:为元素设置css样式的属性，假如与媒体查询中设置的媒体样式是相同的属性时。那么需要注意 ，元素的css样式要写在媒体查询上面，否则css样式会覆盖媒体样式，使其失效。