如何在网页中使用媒体查询 media queries -

xuefeng3600

浏览: 28375 次
性别:

最近访客更多访客>>

ice_cream_bing

ljf_home

klxqljq

Francis.lin

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

如何在网页中使用媒体查询 media queries

博客分类：

web开发

HTML5 CSS

响应试设计目前早已渗透到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;
}

目前我们还没有使用媒体查询，你现在可以尝试改变浏览器窗口，页面中的三个元素是不会有变化的。

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演示

添加过渡动画效果
如果你不想让元素变化得太突兀，即突然消失，我们可以为元素添加一些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;
}
}

现在我们可以尝试改变浏览器尺寸，看下最后一个元素变化的效果，来对比一下之前变化的区别。

demo3演示

分享到：