媒体查询
媒体查询可以让我们根据设备显示器的特性为其设定css样式。可以将媒体查询想象成对浏览器的提问。如果浏览器回答“是”，则应用样式；如果回答“否”，则不应用样式。
媒体查询是类似在提一下的问题：
- 你是一块纵向放置的显示屏吗？
- 你的最大宽度是960px吗？
- 你的最大高度是768px吗？
…
然后根据浏览器的回答给他添加相应的样式。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {background-color: grey;}
@media screen and (max-width: 960px){ //如果最大宽度是960px，则添加以下样式
body{
background-color: red;
}
}
@media screen and (max-width: 768px) {
body{
background-color: orange;
}
}
</style>
</head>
<body>
</body>
</html>