您的位置：首页 > Web前端 > CSS

CSS3媒体查询入门，制作自己的响应式导航

2015-08-11 22:25 776 查看

现今每天都有更多的手机和平板电脑问市。消费者能够拥有可想象到的各种规格和形状的设备，但是网站开发人员却面临一个挑战：如何使他们的网站在传统浏览器、手机和平板电脑浏览器上有很好的效果，如何在各种大小的屏幕上提供一流的用户体验,答案是：采用响应式设计。响应式设计可以随所显示的屏幕大小而改变。实现响应式设计的主要方法是使用 CSS 媒体查询。--摘自IBMdeveloperworks

相信大家很多人都了解Bootsrap这个响应式框架，简单来说，该框架根据不同的分辨率提供非常友好的浏览体验，里面的核心就是媒体查询@media。

如何使用?

@media (min-width:800px) { ... }

这是一条基本的媒体查询语句，@media可以看成 if

如果@media后面的条件满足，则执行后面的花括号的语句。

简单尝试

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.header{
background-color: red;
width: 100%;
height: 40px;
}
@media ( min-width: 500px) {
.header{
background-color: blue;
}
}
</style>
<body>

<div class="header"></div>

</body>
</html>

@media ( min-width: 500px) 这里开始判断当前的分辨率，如果最小分辨率为500px（分辨率在500px以上）则
.header 的背景色变为蓝色，相当于重写了background-color属性。
请多尝试其他属性如width，block等等。

制作响应式导航

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>媒体查询</title>
<script rel="script" src="jquery.min.js"></script>
<script>
$(document).ready(function () {
$("a").click(function(){
$("li").toggle();
})
})
</script>
<style>
*{
margin: 0;
padding: 0;
}
#header{
width: 100%;
background-color: #4db14d;
height: 40px;
}
ul{
}
li{
float: left;
list-style: none;
width: 80px;
display: block;
padding-top: 10px;
color: #fff;
background-color: #4db14d;
text-align: center;
}
a{
padding-top: 10px;
padding-bottom: 10px;
color: #fff;
display: none;
width: 100%;
text-align: center;
}
@media ( max-width: 520px ) {
li{
width: 100%;
border-top: 1px solid #1b961b;
padding-bottom: 10px;
display: none;
}
a{
display: block;
}
}
</style>
</head>
<body>

<div id="header">
<a>Fuck</a>
<ul>
<li>测试1</li>
<li>测试2</li>
<li>测试3</li>
<li>测试4</li>
<li>测试5</li>
<li>测试6</li>
</ul>
</div>
</body>
</html>

在导航中，除了菜单以外肯定还有展开菜单的图标(低分辨率下),所以我们制作的时候可以先写上，并将它隐藏。

我们做的仅是判断分辨率，如果分辨率小余某个值，则隐藏菜单，使用菜单突变将它显示。

注意的是我这里将小分辨率下，菜单的宽度设置到了100%，方便使用体验。可以尝试更好地方法。

然后使用jQuery显示/隐藏菜单or菜单图标

除此之外，还可以有更多的判断，如：分辨率在800-1200之间（min-width:800px）and (max-width:1200px)

@media (min-width:800px) and (max-width:1200px) { ... }

更多关于媒体查询请点击查看

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航