本节书摘来自华章社区《响应式Web设计：HTML5和CSS3实践指南》一书中的第1章，第1.6节基于媒介查询的动态导航栏，作者（美）　Benjamin LaGrone，更多章节内容可以访问云栖社区“华章社区”公众号查看

1.6　基于媒介查询的动态导航栏

媒介查询不仅限于调整图像大小。可以使用媒介查询为访问者提供更加动态的网页。可以使用媒介查询显示一个基于不同屏幕尺寸的响应式菜单。

1.6.1　准备工作

为了实现一个响应式菜单系统，我们将使用两个不同的菜单，为三种不同的浏览器窗口尺寸显示一个动态菜单。

1.6.2　实现方式

对于较小的浏览器窗口，特别是对移动设备和平板电脑，创建一个简单的select菜单，其只占用少量的垂直空间。这个菜单为导航选项使用了HTML中的form元素，通过触发JavaScript代码来加载选择的新页面。

为了尽可能好地运用响应式导航元素，我们想要在屏幕宽度变化时，菜单列表版本能够移动到一个不同的布局位置。对于中等尺寸宽度，即801～1024px，菜单停留在页面顶部并保持100%宽度。当屏幕宽度大于1025px时，菜单将浮动到父元素的左边。

在801～1024px的媒介查询中，为large-menu类添加一个100%宽度，对于1025px的媒介查询，为large-menu类添加一个20%宽度及float:left值。为了填满这个页面，也将添加一个包装在div元素中的文本段落。可以再次使用Lorem Ipsum文本生成器来创建填充文本(。在中等宽度媒介查询中设置包含该文本段落的元素宽度为100%。在最大的媒介查询中，设置包含该文本段落的元素宽度为80%，将将其浮动到父元素的右边。

样式应该与以下代码段一样。

最终结果是一个拥有三个不同版本导航菜单的页面。当发现对于每个特定的浏览器窗口尺寸都有菜单的一个优化版本时，你的观众将会感到惊讶。你可以在以下截图中看到这些神奇的导航元素。

1.6.3　工作原理

每个导航版本应用了CSS3的媒介查询属性来最大限度地提高菜单和内容的可用空间。在最小的窗口中（即小于801px），导航整齐地排列在select表单元素中。在中等尺寸的窗口中（介于801～1024px）,导航是内联的并且横跨页面顶部，内容紧跟着导航。最后，对于最宽的浏览器窗口，导航浮动到了左边并且只占横屏宽度的20%，而内容在宽屏浏览器窗口剩余的80%（右边）中保持最大化。需要更多的计划和努力才能实现该技术，但是值得用它为你的用户提供尽可能最佳的视角。----