本文旨在帮助初学者理解如何使用 css 的 `@media screen` 特性构建响应式导航栏。通过实例代码，我们将演示如何根据屏幕尺寸调整导航栏的布局，使其在不同设备上都能提供良好的用户体验。我们将介绍使用 `Float` 和 `flexbox` 两种方法来实现响应式布局，并提供相应的代码示例和注意事项。
响应式设计的核心：@media screen
响应式设计的核心在于能够根据设备的屏幕尺寸，动态地调整网页的布局和样式。@media screen 是 css3 中用于实现这一目标的关键特性。它允许我们针对不同的屏幕尺寸定义不同的 CSS 规则，从而实现网页在不同设备上的自适应显示。
使用 @media screen 和 float 实现响应式导航栏
以下是一个使用 @media screen 和 float 属性实现响应式导航栏的示例。
<header> <div class="clearfix"> <div class="logo"> <a href=""> <img width="60px" src="pictures/airbnb2.png" alt="Airbnb Logo"> </a> </div> <nav> <ul> <li><a href="">Log-in</a></li> <li><a href="">Registrieren</a></li> <li><a href="">Hilfe</a></li> <li><a href="">Gastgeber werden</a></li> </ul> </nav> </div> </header>
CSS 样式:
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; } .clearfix::after { content:""; clear:both; display:table } /* Header bzw. Navigation */ .clearfix { width: 100%; height: 80px; background-color: lightgray; } .logo { height: inherit; width: 80px; float: left; padding: 10px; } ul { list-style-type: none; } li { float: right; padding: 31.2px 20px; } a:link, a:visited { text-decoration: none; color: black; } li:hover { border-bottom: 2px solid black; height: 80px; } @media only screen and (max-width: 700px) { .logo, li { float: none; } }
代码解释:
- .clearfix 类用于清除浮动，确保父元素能够正确包裹浮动的子元素。
- .logo 和 li 元素默认使用 float: left 和 float: right 实现水平排列。
- @media only screen and (max-width: 700px) 定义了一个媒体查询，当屏幕宽度小于等于 700px 时，应用其中的 CSS 规则。
- 在媒体查询中，将 .logo 和 li 的 float 属性设置为 none，使其不再浮动，从而实现垂直排列。注意，这里需要选择器是 li 而不是 .li。
注意事项:
使用 @media screen 和 Flexbox 实现响应式导航栏
另一种实现响应式导航栏的方法是使用 Flexbox 布局。Flexbox 提供了更灵活的布局控制，可以更容易地实现各种复杂的布局需求。
HTML 结构 (同上):
<header> <div class="clearfix"> <div class="logo"> <a href=""> <img width="60px" src="pictures/airbnb2.png" alt="Airbnb Logo"> </a> </div> <nav> <ul> <li><a href="">Log-in</a></li> <li><a href="">Registrieren</a></li> <li><a href="">Hilfe</a></li> <li><a href="">Gastgeber werden</a></li> </ul> </nav> </div> </header>
CSS 样式:
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; } /* Header bzw. Navigation */ .clearfix { display: flex; } .logo, nav { width: 50%; } ul { display: flex; width: 100%; list-style-type: none; /* 移除ul默认样式 */ justify-content: flex-end; /* 将列表项推到右侧 */ } li { padding: 31.2px 20px; } a:link, a:visited { text-decoration: none; color: black; } li:hover { border-bottom: 2px solid black; height: 80px; } @media only screen and (max-width: 700px) { .clearfix { flex-direction: column; /* 垂直排列子元素 */ } .logo, nav { width: 100%; /* 占据全部宽度 */ } ul { justify-content: center; /* 列表项居中 */ } }
代码解释:
- .clearfix 类现在使用 display: flex 属性，使其成为一个 Flex 容器。
- .logo 和 nav 元素默认占据 clearfix 容器的 50% 宽度。
- ul 元素也使用 display: flex 属性，并使用 justify-content: flex-end 将列表项推到右侧。
- 在媒体查询中，将 .clearfix 的 flex-direction 属性设置为 column，使其子元素垂直排列。
- .logo 和 nav 元素现在占据 clearfix 容器的 100% 宽度。
- ul 元素的 justify-content 属性设置为 center，使列表项居中显示。
注意事项:
- Flexbox 布局提供了更灵活的布局控制，但需要理解 Flex 容器和 Flex 项目的概念，以及各种 Flex 属性的作用。
- 使用 Flexbox 可以更容易地实现各种复杂的布局需求，例如垂直居中、等高布局等。
总结
本文介绍了如何使用 CSS 的 @media screen 特性构建响应式导航栏。我们演示了使用 float 和 flexbox 两种方法来实现响应式布局，并提供了相应的代码示例和注意事项。通过学习本文，你应该能够掌握响应式设计的基本原理，并能够使用 @media screen 和 float 或 flexbox 构建简单的响应式导航栏。掌握这些基础知识后，你可以进一步学习更高级的响应式设计技巧，例如使用 CSS Grid Layout、响应式图片等，以构建更复杂的响应式网页。