《响应式Web设计:HTML5和CSS3实践指南》——1.6节基于媒介查询的动态导航栏-阿里云开发者社区

开发者社区> 华章计算机> 正文

《响应式Web设计:HTML5和CSS3实践指南》——1.6节基于媒介查询的动态导航栏

简介:
+关注继续查看

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

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

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

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


bf6ca37b9660420e127343f02f2502ce31676024


42efb633f6f51163bfeff8e2265c1b08974f6a7d

为了尽可能好地运用响应式导航元素,我们想要在屏幕宽度变化时,菜单列表版本能够移动到一个不同的布局位置。对于中等尺寸宽度,即801~1024px,菜单停留在页面顶部并保持100%宽度。当屏幕宽度大于1025px时,菜单将浮动到父元素的左边。
在801~1024px的媒介查询中,为large-menu类添加一个100%宽度,对于1025px的媒介查询,为large-menu类添加一个20%宽度及float:left值。
为了填满这个页面,也将添加一个包装在div元素中的文本段落。可以再次使用Lorem Ipsum文本生成器来创建填充文本(http://lipsum.com/)。在中等宽度媒介查询中设置包含该文本段落的元素宽度为100%。在最大的媒介查询中,设置包含该文本段落的元素宽度为80%,将将其浮动到父元素的右边。

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


a19d77790074d6687200a7ffc9201b3b85e28803


65fd510a5127bf51cfb1c4f75ec4ca813a6d3f49


d88938f0de9bf159dd5f3da9ac5c0839a558614d

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


2cfe66051b2ea3e6612481103b6dd4659279e062

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
html5 getComputedStyle + resize 实现动态宽高度等比响应式页面设计
序:通常我们只能控制div的宽度 而不能控制高度,在响应式页面里 如果要这个div是正方形那么必须的用媒体查询在不同的分辨率下写死宽高度 今天突发奇想研究了个 用百分比来动态控制div的高度让其与宽度相同 成为一个正方形 甚至任何你想要比例 一,背景:目前移动端大多数图片或视频列表页面的显示,列出...
988 0
10059
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载