响应试设计目前早已渗透到web前端的方方面面，说到响应式设计我们就会用到媒体查询(media queries)，它可以帮助你根据浏览器尺寸对网页中的元素信息相应的布局调整，当然你还可以借助css3的一些新的特性，添加一些过渡效果。
无论你是用框架还是自己写的媒体查询方式，你就会感受到它自身灵活的地方，以及给你的网站带来更加完美的用户体验。
HTML 结构
下面我将向大家举一个简单的例子来演示媒体查询的使用方法，首先我将使用一个大的div类 (.layout)，并且包含三个小的div类 (.box),以下是html代码结构：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css media queries </title>
</head>
<body>
<div class='layout'>
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
</div>
</body>
</html>
css样式
接下来我们再添加一些简单的样式
.layout {
width:960px;
height:600px;
background:#b34d6f;
margin:auto;
}
.box {
width:300px;
height:200px;
margin-right:22px;
background:#4d77b3;
display:inline-block;
margin-top:50px;
}
.box:last-child {
margin-right:0px;
}
目前我们还没有使用媒体查询，你现在可以尝试改变浏览器窗口，页面中的三个元素是不会有变化的。
添加媒体查询 media queries
现在我们要为页面设置一些尺寸分割点，分别设置了小于最大宽度为960px的显示方式以及小于最大宽度为660px的页面显示方式。
.layout {
width:960px;
height:600px;
background:#b34d6f;
margin:auto;
}
.box {
width:300px;
height:200px;
margin-right:22px;
background:#4d77b3;
display:inline-block;
margin-top:50px;
}
.box:last-child {
margin-right:0px;
}
@media screen and (max-width: 660px) {
.layout {
width:570px;
}
.box {
width:170px;
}
.box:last-child {
opacity:0;
}
}
现在我们可以尝试改变一下浏览器的尺寸大小，当宽度小于660px时第三个元素就会消失，我把它的透明度设置为0.
添加过渡动画效果
如果你不想让元素变化得太突兀，即突然消失，我们可以为元素添加一些css3新特性，为了解决浏览器的兼容问题，我们还需添加一些前缀名。
* {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.layout {
width: 960px;
height: 600px;
background: #b34d6f;
margin: auto;
}
.box {
width: 300px;
height: 200px;
margin-right: 22px;
background: #4d77b3;
display: inline-block;
margin-top: 50px;
}
.box:last-child {
margin-right: 0px;
}
@media screen and (max-width: 660px) {
.layout {
width: 570px;
}
.box {
width: 170px;
}
.box:last-child {
opacity: 0;
}
}
现在我们可以尝试改变浏览器尺寸，看下最后一个元素变化的效果，来对比一下之前变化的区别。