首先要知道，我们为什么要写自适应的页面（响应式页面）
众所周知，电脑、平板、手机的屏幕是差距很大的，假如在电脑上写好了一个页面，在电脑上看起来不错，但是如果放到手机上的话，那可能就会乱的一塌糊涂，这时候怎么解决呢？以前，可以再专门为手机定制一个页面，当用户访问的时候，判断设备是手机还是电脑，如果是手机就跳转到相应的手机页面，例如百度的就是，手机访问www.baidu.com就会跳转到m.baidu.com，这样做简直就是费力不讨好的活，所以聪明的程序员开发了一种自适应写法，即一次开发，处处显示！这到底是一个什么样的神器东西呢，接下来就揭晓它的神秘面纱。
CSS3 的 @media 查询
定义和使用
使用 @media 查询，你可以针对不同的屏幕大小定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，这对调试来说是一个极大的便利。
CSS 语法
| @media mediaType and|not|only (media feature) { /*CSS-Code;*/} |
媒体类型（mediaType ）
类型有很多，在这里不一一列出来了，只列出了常用的几个。
| 值 | 描述 |
|---|---|
| all | 用于所有设备 |
| 用于打印机和打印预览 | |
| screen | 用于电脑屏幕，平板电脑，智能手机等。（最常用） |
| speech | 应用于屏幕阅读器等发声设备 |
媒体功能（media feature）
媒体功能也有很多，以下列出常用的几个
| 值 | 描述 |
|---|---|
| max-width | 定义输出设备中的页面最大可见区域宽度 |
| min-width | 定义输出设备中的页面最小可见区域宽度 |
开始编写响应式页面
编写之前呢，有几个要准备的工作
准备工作1：设置Meta标签
首先我们在使用 @media 的时候需要先设置下面这段代码，来兼容移动设备的展示效果：
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> |
