《响应式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%(右边)中保持最大化。需要更多的计划和努力才能实现该技术,但是值得用它为你的用户提供尽可能最佳的视角。----

相关文章
|
1月前
|
编解码 前端开发 UED
CSS进阶 - 响应式设计与媒体查询
【6月更文挑战第17天】响应式设计通过媒体查询适应不同设备,确保网页在桌面、平板、手机上提供优化体验。媒体查询是CSS核心技术,允许根据设备特性应用样式。常见问题包括忽视视口设置、硬编码断点和过度依赖查询。解决办法涉及设置正确的视口元标签、基于内容的断点和模块化设计。通过移动优先策略和灵活的断点管理,可创建高效、易维护的响应式网站。
|
9天前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
53 0
|
9天前
动态粒子发射404网站HTML源码
动态粒子发射404网站HTML源码,粒子内容可以进行修改,默认是4,0数字还有一个页面不存在英文,可以自行修改,喜欢的朋友可以拿去使用,源码是html,记事本打开修改即可,鼠标双击可以运行
18 0
动态粒子发射404网站HTML源码
|
15天前
|
JavaScript 前端开发 API
Web Components详解-HTML Templates
Web Components详解-HTML Templates
19 6
|
21天前
|
移动开发 前端开发 JavaScript
HTML5+CSS3+JavaScript网页实战
HTML5+CSS3+JavaScript网页实战
|
22天前
|
移动开发 前端开发 JavaScript
揭秘VSCode魔法工具箱:HTML5 & CSS3 超强插件集合 + Css Reset与Normalize.css的终极对决
揭秘VSCode魔法工具箱:HTML5 & CSS3 超强插件集合 + Css Reset与Normalize.css的终极对决
|
1月前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
44 3
|
1月前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
32 2
|
1月前
|
存储 前端开发 测试技术
Web实战丨基于django+html+css的在线购物商城
Web实战丨基于django+html+css的在线购物商城
38 2
|
14天前
|
Web App开发 前端开发 JavaScript
CSS 媒体查询 @media【详解】
CSS 媒体查询 @media【详解】
14 0