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文本生成器来创建填充文本(http://lipsum.com/)。在中等宽度媒介查询中设置包含该文本段落的元素宽度为100%。在最大的媒介查询中，设置包含该文本段落的元素宽度为80%，将将其浮动到父元素的右边。
样式应该与以下代码段一样。
最终结果是一个拥有三个不同版本导航菜单的页面。当发现对于每个特定的浏览器窗口尺寸都有菜单的一个优化版本时，你的观众将会感到惊讶。你可以在以下截图中看到这些神奇的导航元素。
1.6.3 工作原理
每个导航版本应用了CSS3的媒介查询属性来最大限度地提高菜单和内容的可用空间。在最小的窗口中（即小于801px），导航整齐地排列在select表单元素中。在中等尺寸的窗口中（介于801～1024px）,导航是内联的并且横跨页面顶部，内容紧跟着导航。最后，对于最宽的浏览器窗口，导航浮动到了左边并且只占横屏宽度的20%，而内容在宽屏浏览器窗口剩余的80%（右边）中保持最大化。需要更多的计划和努力才能实现该技术，但是值得用它为你的用户提供尽可能最佳的视角。----