响应式设计在设计风格和色彩搭配上保持了很大的一致性，又根据移动设备的特点对布局进行调整。响应式设计原则：小屏幕只显示高优先级内容提供清晰和友好的手指操作链接体验的一致性考虑操作移动设备的习惯下面将构建一个简单的导航样例来介绍媒介查询的具体运用有关媒介查询的详细讲解，可查看上一篇经验《css3媒体查询》http://jingyan.baidu.com/article/3a2f7c2e240a1826afd611a2.html?allowHTTP=1
https://v.qq.com/x/page/g05673wpp8p.html
工具/原料
网页编辑器
浏览器
制作响应式导航栏
1、编写导航栏的html结构：具体代码如下：<divclass="header"><divclass="container"><ul><liclass="logo">RubyChina</li><li><ahref="#">热门帖子</a></li><li><ahref="#">精华帖子</a></li><li><ahref="#">最新原创</a></li><li><ahref="#">文档翻译</a></li></ul></div></div>
2、添加几个<meta>标签：<metaname="viewport"content="width=device-width,initial-scale=1.0">/*使用viewportmeta标签在手机浏览器上控制布局*/<metamame="apple-moblie-web-app-capable"content="yes">/*通过快捷方式打开是全屏显示*/<metaname="apple-moblie-web-app-status-bar-style"content="blank">/*隐藏状态栏*/<metamame="format-detection"content="telephone=no">/*iphone会将看起来像电话号码的数字添加电话链接，这里关闭掉*/为了让IE9以下的浏览器能够支持响应式设计，可以加上一个兼容性的JavaScript库，如：respond.js或media-queries.js兼容性代码如下：<!--[ifitIE9]><scriptsrc="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
3、为导航栏添加css样式：定义船体宽度在320px以下的样式：@mediascreenand(max-width:320px){.header{height:40px;}li{line-height:40px;padding:015px015px;display:block;background:#333;text-align:center;border-top:1pxsolidwhite;}.logo{border:none;}
4、定义窗体宽度为320px到765px的样式@mediascreenand(min-width:320px)and(max-width:765px){.header{height:50px;}li{line-height:50px;padding:015px015px;display:block;background:#333;text-align:center;border-top:1pxsolidwhite;}.logo{border:none;}}
5、定义窗体宽度765px以上的样式：@mediascreenand(min-width:765px){.header{height:60px;}li{line-height:60px;padding:015px015px;display:block;text-align:center;float:left;}.logo{font-size:30px;border:none;}}
https://v.qq.com/x/page/g05673wpp8p.html