CSS@media查询

首先要知道，我们为什么要写自适应的页面（响应式页面）
众所周知，电脑、平板、手机的屏幕是差距很大的，假如在电脑上写好了一个页面，在电脑上看起来不错，但是如果放到手机上的话，那可能就会乱的一塌糊涂，这时候怎么解决呢？以前，可以再专门为手机定制一个页面，当用户访问的时候，判断设备是手机还是电脑。这样做简直就是费力不讨好的活，所以懒惰的程序员开发了一种响应式写法，即一次开发，可以在不同分辨率的设备上正确显示！这到底是一个什么样的神器呢，接下来就揭晓它的神秘面纱。
1.CSS3 的 @media 查询

定义和使用
使用 @media 查询，你可以针对不同的屏幕大小定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，这对调试来说是一个极大的便利。
css语法：

@media mediaType and|not|only (media feature) {
     /*CSS-Code;*/
}

媒体类型（mediaType ）

值	描述
all	用于所有设备
aural	已废弃。用于语音和声音合成器
braille	已废弃。 应用于盲文触摸式反馈设备
embossed	已废弃。 用于打印的盲人印刷设备
handheld	已废弃。 用于掌上设备或更小的装置，如PDA和小型电话
print	用于打印机和打印预览
projection	已废弃。 用于投影设备
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	应用于屏幕阅读器等发声设备
tty	已废弃。 用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备
tv	已废弃。 用于电视和网络电视

当然以上的媒体类型大多用不到，用到最多的是all和screen两个；
媒体功能
媒体功能也有很多，以下列出常用的两个

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

2.开始我们的响应式之旅。
准备工作1：设置Meta标签
首先我们在使用 @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]-->

准备工作3：设置IE渲染方式默认为最高(可选)
现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8 为了防止这种情况，我们需要下面这段代码来让IE的文档渲染模式永远都是最新的

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

开始敲代码
当屏幕分辨率小于1280px时

@media screen and (max-width: 1280px) {
    body {
        background-color:red;
    }
}

当屏幕分辨率大于1280px时

@media screen and (min-width: 1280px) {
    body {
        background-color:black;
    }
}

将以上代码加入css文件中，可以得到如下效果：
当分辨率大于1280px时：

当分辨率小于1280px时

结语：好啦！简单的css@media查询的只是就这么多，关于响应式的很多内容还要多了解了解。