响应试设计目前早已渗透到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;
}
}
现在我们可以尝试改变浏览器尺寸,看下最后一个元素变化的效果,来对比一下之前变化的区别。