先来段代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background-color: grey;
}
@media only screen and (max- 960px) {
body{
background-color: red;
}
@media only screen and (max- 768px) {
body{
background-color: orange;
}
@media only screen and (max- 320px) {
body{
background-color: green;
}
</style>
</head>
<body>
</body>
</html>
上边用到了css的媒体查询，浏览器会根据视口的不同，来改变body的颜色。.媒体查询能使我们根据设备的各种功能特性来设定相应的样式。除此之外，还可以使用@import 指令在当前样式表中按条件引入其他样式表。@import url("phone.css") screen and(max-768px).[!!!:css的@import会增加http请求].
媒体查询能检测哪些特性：
最常用的是width(视口宽度) device-width(屏幕宽度)
除此之外还有：orientation(检查设备横向还是纵向)aspect-ratio(基于视口宽高比。一个16：9比例的显示屏可以这样 aspect-ratio:16/9)device-aspect-ratio(和aspect-ratio类似。)等。通常，面向“移动设备”用户使用max-device-width；面向“PC设备”用户使用max-width。
用媒体查询改造我们的设计：
css代表层叠样式表，就是指样式表后边的样式会覆盖前边的样式，因此我们可以先针对大视口设计，针对小视口再用媒体查询重写.
加载媒体查询的最佳方法：
@media screen and (max-768px){}.Respond.js为IE8及更低版本增加媒体查询，但是不支持@import.如果用link的话会增加http请求数量。
内容参考：响应式Web设计 HTML5和CSS3实战。