如何制作响应式导航栏
1、编写导航栏的html结构：
具体代码如下：
<div class="header">
<div class="container">
<ul>
<li class="logo">Ruby China</li>
<li><a href="#">热门帖子</a></li>
<li><a href="#">精华帖子</a></li>
<li><a href="#">最新原创</a></li>
<li><a href="#">文档翻译</a></li>
</ul>
</div>
</div>
2、添加几个<meta>标签：
<meta name="viewport" content="width=device-width,initial-scale=1.0">/*使用viewport meta 标签在手机浏览器上控制布局*/
<meta mame="apple-moblie-web-app-capable" content="yes">/*通过快捷方式打开是全屏显示*/
<meta name="apple-moblie-web-app-status-bar-style" content="blank">/* 隐藏状态栏*/
<meta mame="format-detection" content="telephone=no">/*iphone会将看起来像电话号码的数字添加电话链接，这里关闭掉*/
为了让IE9以下的浏览器能够支持响应式设计，可以加上一个兼容性的JavaScript库，如：respond.js或media-queries.js
兼容性代码如下：
<!--[if it IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
3、为导航栏添加css样式：
定义船体宽度在320px以下的样式：
@media screen and (max-width: 320px){
.header{height:40px;}
li{
line-height: 40px;
padding:0 15px 0 15px;
display: block;
background: #333;
text-align: center;
border-top:1px solid white;
}
.logo{border:none;}
4、定义窗体宽度为320px到765px的样式
@media screen and ( min-width: 320px) and (max-width: 765px){
.header{height:50px;}
li{
line-height: 50px;
padding:0 15px 0 15px;
display: block;
background: #333;
text-align: center;
border-top:1px solid white;
}
.logo{border:none;}
}
5、定义窗体宽度765px以上的样式：
@media screen and (min-width: 765px){
.header{height:60px;}
li{
line-height: 60px;
padding:0 15px 0 15px;
display: block;
text-align: center;
float:left;
}
.logo{font-size: 30px;border:none;}
}
