要是前边的 CSS 部分你学得扎实，这部分基本就是看一眼就懂了，很简单的一个事。就是比今天中午吃啥这个问题还简单。额……我比喻的不恰当哈，那样就成了最难的问题了，算了，不比喻了，你们就领会精神就好了。
先解释一下原理，就是你为一个元素设置多重的 CSS ，他们根据一定的规则，在不同的情况下分别起作用。这一定的条件一般都是指浏览器窗口的宽高范围。
那么我们来做一个小的案例说明一下：
一个 Html 文件，里面一个方块，就是这么简单的内容，这代码大家都能轻松写出来了吧？
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<title>响应式的小 Box</title>
<style>
#box {
width: 600px;
height: 300px;
margin: 50px auto;
background: blue;
}
</style>
</head>
<body>
<div id=“box”></div>
</body>
</html>
这个案例简单吧，而且呢，这个 #box 在各种情况下显示的都一样，很好，很老实，但是只是个不聪明的乖宝宝而已。怎么让它变得聪明起来，可以根据外界的变化随机应变呢？当然不是喂他喝脑白金了。
我们改写一下 CSS 部分哦~
<style>
@media (min-width: 768px){
#box {
width: 600px;
height: 300px;
margin: 50px auto;
background: blue;
}
}
@media (max-width: 768px){
#box {
width: 90%;
height: 300px;
margin: 50px auto;
background: red;
}
}
</style>
看看什么变化？我们来仔细的讲解一下这个代码，其实很好理解的
`@media(条件){当满足条件时，要使用的 CSS }`
这叫做媒体查询，就是查询一下浏览器窗口的宽度，当然你换成 height，查询高度也没问题。那么我们来说一下上述代码表达的意思：
先做媒体查询，看看当前浏览器的窗口尺寸，如果满足条件 min-width: 768px ，就是窗口的最小宽度是 768px ，那么就使用大括号里 CSS ，600px 的宽度，然后蓝色背景。
第二段跟上面类似，就是当窗口的最大宽度是 768px ，那么就执行这段里的 CSS，90% 的宽度，红色背景。
这个效果你要验证的话，要手动拖动窗口的大小去看，别打开看一眼就跑来问我为什么不起作用，那样我不理你哦~
这个其实很简单，只是给某一部分 CSS 加一个条件判断而已，当然了条件可以再复杂一些的，比如加上 and 或者 or 这类的条件。就像下面这样。
@media (min-width: 768px) and (max-width: 1024px){
#box {
width: 80%;
height: 300px;
margin: 50px auto;
background: green;
}
}
就是表示同时要满足两个条件，大括号里的 CSS 才起作用。如果把 and 换成 or 就是说满足两个条件其中之一就可以了。
这个问题不难，大家试试看就明白了，学代码这东西就是要多尝试，你努力玩他，他就玩不过你了，于是你就赢了，否则……你就被他玩了。
事实上这个媒体查询可以做很多复杂的玩法，有兴趣可以查询一下，祝你看的头晕，怕头晕的先把我说的这些看懂就好，对了 width 也可以换成 height ，什么意思呢？你猜！
然后那个什么 IE6——8，咳咳，算了，不提了，升级 Win10 吧，会更幸福的~
本章代码下载：本章代码
暂无评论内容