网页支持响应式布局的好处我就不说了，这里我通过写一个简单的网站导航来学习响应布局的开发
Meta标签定义
<!--使用 viewport meta 标签在手机浏览器上控制布局--> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" /> <!--通过快捷方式打开时全屏显示--> <meta name="apple-mobile-web-app-capable" content="yes" /> <!--隐藏状态栏--> <meta name="apple-mobile-web-app-status-bar-style" content="blank" /> <!--iPhone会将看起来像电话号码的数字添加电话连接，应当关闭--> <meta name="format-detection" content="telephone=no" />
定义body中的结构
<div class="nav"> <ul> <li> <a href="#" class="actived">网站首页</a> </li> <li> <a href="#">公司案例</a> </li> <li> <a href="#">公司相册</a> </li> <li> <a href="#">团队博客</a> </li> <li> <a href="#">关于我们</a> </li> </ul> <img src="img/more_black.png" /> </div>
定义样式
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.nav {
position: relative;
background-color: #fff;
height: 78px;
width: 100%;
border-bottom: 1px solid #DADADA;
}
.nav img {
position: absolute;
right: 20px;
top: 30px;
width: 28px;
display: none;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.nav ul li {
height: 78px;
width: 168px;
line-height: 78px;
text-align: center;
display: inline-block;
}
.nav ul li:hover {
cursor: pointer;
}
.nav ul li a {
text-decoration: none;
color: #666;
padding-bottom: 8px;
}
.nav ul li .actived {
border-bottom: 3px solid #EE5C42;
}
</style>查看效果图
可以看到导航已经显示出来了，我们给导航加上点击事件以改变导航选中样式
<script>
$(function() {
$(".nav ul li").click(function() {//导航点击
$(".nav ul li a").removeClass("actived");
$(this).children("a").addClass("actived");
});
});
</script>那如果说我们想要支持响应式布局该怎么做呢？
上面最开始我们已经添加支持手机的Meta相关标签元素了，接着我们通过媒体查询来使我们手机支持响应式导航显示
主要用到@media only screen and (max-width: 878px) {} 设置当屏幕宽度小于878px的时候执行里面的样式
这里我们先在右上角显示一个图标，然后点击图标的时候显示右侧的导航，再点击图标隐藏右侧的导航
我们继续在Style标签内添加以下样式
/*媒体查询*/
/*屏幕宽度小于878px的时候执行里面的css*/
@media only screen and (max-width: 878px) {
.nav img {
display: inline;
}
.nav ul {
position: absolute;
right: 0;
text-align: right;
top: 78px;
display: none;
}
.nav ul li {
display: block;
border: 1px solid #dadada;
height: 58px;
line-height: 58px;
width: 98px;
}
.nav ul li a {
display: block;
padding-bottom: 0;
}
.nav ul li .actived {
border-bottom: none;
}
.nav ul li a:hover {
background-color: #6E6E6E;
color: #fff;
}
}最后将js添加上去，用于操作显示或隐藏下方导航列表
$(".nav img").click(function() {//显示或隐藏下方导航列表
$(".nav ul").slideToggle(100);
});OK，完成。
我们来看下效果，在手机上面打开网页显示导航如下图
点击右侧图标显示导航效果
