首先，先看下面一段代码：
<link rel = "stylesheet" type = "text/css" href = "styleA.css" media = "screen and (min-width: 400px)" >这段话看起来很简单，就是引入一个css文件，可是后面多了个“
media = "screen and (min-width: 400px)" >”，这个是说，只有当浏览器窗口大于等于400像素的时候，引入这个css文件，否则，不使用。这是引入css文件，还有就是在css文件内部定义不同大小窗口，应用不同的样式：
@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
这里用到了“ @media screen and (max-width: 600px) { /*这里面写css样式*/ } ”，这句话的意思是，当浏览器窗口小于等于600像素的时候，将背景色改为#ccc。这两种方法都可以。这样的话，就可以对不同尺寸的浏览器应用不同的样式，运行下面的代码，尝试改变浏览器的宽度，看看效果：
提示：您可以先修改部分代码再运行
通过上面运行的代码，我们发现，@media screen 真是“神器”，有了这玩意，我们再也不用专门做一个手机站，一个电脑站了，定义两套css就可以了，规定下，什么时候用哪个css就没问题了！