如何在网页中使用媒体查询 media queries
?
响应试设计目前早已渗透到web前端的方方面面，说到响应式设计我们就会用到媒体查询(media queries)，它可以帮助你根据浏览器尺寸对网页中的元素信息相应的布局调整，当然你还可以借助<!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;}?
目前我们还没有使用媒体查询，你现在可以尝试改变浏览器窗口，页面中的三个元素是不会有变化的。
?
demo1演示
?
添加媒体查询 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.
?
demo2演示
?
添加过渡动画效果
如果你不想让元素变化得太突兀，即突然消失，我们可以为元素添加一些* { -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;}}
?
现在我们可以尝试改变浏览器尺寸，看下最后一个元素变化的效果，来对比一下之前变化的区别。
demo3演示