准备工作1：设置Meta标签
首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这段代码的几个参数解释：
width = device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-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">
不过我最近又发现了一个更给力的写法：
- <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
怎么这段代码后面加了一个chrome=1，这个Google Chrome Frame（谷歌内嵌浏览器框架GCF），如果有的用户电脑里面装了这个chrome的插件，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，无比给力，不过如果用户没装这个插件，那这段代码就会让IE以最高的文档模式展现效果。这段代码我还是建议你们用上，不过不用也是可以的。
以上内容摘自http://blog.csdn.net/yuzhongkai/article/details/51041937
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<title>Document</title> ???<style> ???????body{ ???????????background: red ???????} ???????@media screen and ?(min-width:600px) and ?(max-width:1200px){ ??????????body{ ???????????background: greenyellow ??????????} ????????} ???????@media screen and ?(max-width:600px){ ??????????body{ ???????????background: rgb(47, 102, 255) ??????????} ????????} ???????/* 页面宽度大于1200背景红色 1200-600绿色 ?小于600蓝色 */ ???</style></head><body> ??</body></html>常用的自媒体查询样式
| 特性名 | 值 | 应用场景 |
| 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位） | 检查是否支持彩色输出（比如是不是黑白打印）， ????? 或者支持的颜色数量 | ???
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<title>Document</title> ???<link rel="stylesheet" href="1.css""> ???<link rel="stylesheet" href="2.css" media="(max-width:800px)"></head><body> ?????<div> ???????<ul> ???????????<li>1是大哥，哈哈哈哈哈哈哈哈哈！</li> ???????????<li>2是大哥，哈哈哈哈哈哈哈哈哈！</li> ???????????<li>3是大哥，哈哈哈哈哈哈哈哈哈！</li> ???????????<li>4是大哥，哈哈哈哈哈哈哈哈哈！</li> ???????????<li>5是大哥，哈哈哈哈哈哈哈哈哈！</li> ???????????<li>6是大哥，哈哈哈哈哈哈哈哈哈！</li> ???????????<li>7是大哥，哈哈哈哈哈哈哈哈哈！</li> ???????????<li>8是大哥，哈哈哈哈哈哈哈哈哈！</li> ???????</ul> ???</div> ??</body></html>
1.css
body{ ???margin: 0; ???width: 100%;}div{ ???text-align: center; ???margin: auto}ul{ ??display: flex; ??list-style: none; ??justify-content: center; ??flex-wrap:nowrap}li{ ?line-height: 30px; ?background: red; ?width: 300px; ?margin: 20px; ?font-size: 30px} ?2.css
body{ ???margin: 0; ???width: 100%;}div{ ???text-align: center; ???margin: auto}ul{ ??display: flex; ??list-style: none; ??justify-content: center; ??flex-wrap:wrap}li{ ?line-height: 30px; ?background: rgb(25, 0, 255); ?width: 300px; ?margin: 20px; ?font-size: 10px} ?css自媒体查询
原文地址：http://www.cnblogs.com/douyaer/p/7856090.html