后端开发教程 - Java、Spring Boot 实战 - msg200.com
使用 HTML 和 CSS Flexbox 编写响应式导航栏：第 2 部分
这篇文章最初发表在debugacademy.com上。
响应式设计是当下的热门话题。无论是在推特上、招聘信息中，还是在文章中，我们经常听到这个词。但响应式设计究竟是什么？它为什么如此重要？我将在这篇文章中解答这些问题。我们还将运用上篇文章中学到的知识，在导航栏的基础上进行构建。如果你还没看过，一定要去看看。
响应式设计：是什么以及为什么？
根据维基百科，响应式设计是“一种网页设计方法，可以使网页在各种设备和窗口或屏幕尺寸上良好呈现”。基本上，响应式设计是网页开发人员和设计人员实施的方法，使他们的网站在所有设备上看起来都很好；平板电脑、手机、笔记本电脑和台式电脑。
响应式设计不仅仅是一个流行词，它实际上非常重要。由于许多人主要通过手机上网，它变得越来越重要。作为一名 Web 开发者，了解响应式设计的基础知识以及如何在代码中实现它们至关重要。那么，我们先来谈谈断点。
断点
断点究竟是什么？顾名思义，它们就是设计中网站元素开始出现问题的位置。您可以通过更改屏幕尺寸并留意设计中开始出现扭曲的区域来找到它们。实际的断点是一个以像素为单位的值。您可以使用 Chrome 中的开发者工具来确定这些值。如果您没有时间或耐心去确定具体的断点值，也可以使用通用的屏幕尺寸值。或者，您也可以目测。每种方法都有其优势。您最终可能会结合使用这三种方法。下面简要介绍一下我之前提到的一些通用屏幕尺寸。
如果您查看下面的Code Pen，您将看到一个清晰的断点示例。
如你所见，我们的标题“导航栏教程”并没有像我们想要的那样排在一行上。我们的设计看起来不再干净利落。我们需要改变这一点。我已经确定了断点的位置大约在 450px。但是我们该如何处理这个断点呢？这时，媒体查询就派上用场了。
媒体查询
媒体查询属性非常有用。你可能会经常用到它。说实话，直到我在“调试学院”的网页开发课程中讨论过媒体查询之后，我才真正开始理解如何使用它。媒体查询允许我们在满足特定条件的情况下，对网页的某些属性或部分进行样式设置。媒体查询有很多应用，你可以在 Christopher Kade 的这篇精彩文章中了解更多。
今天我们将重点介绍如何在断点中使用媒体查询。语法如下。
@media (max-width: 450px) {
}
我们使用@media元素来启动媒体查询。我们将断点放在括号内。您max-width还可以看到关键字。这会筛选出宽度不超过 450px 的屏幕。如果满足这些条件，则会执行后续代码。
通常情况下，你的 CSS 中需要多个媒体查询。由于我们只处理一个简单的导航栏，所以只有一个。如果以后你需要添加多个媒体查询，流程与我们目前讨论的类似。现在，我们来讨论一下使导航栏具有响应式功能所需的 CSS。
步骤1：ulCSS
为了让导航栏具有响应式布局，我们需要添加一些内容。首先，我们来添加一个flex-wrap属性。顾名思义，这是一个特殊的 Flexbox 属性。当 Flex 容器太小，无法在一行中容纳所有内容时，它允许容器内的内容换行显示。在本例中，ul是我们的 Flex 容器， eachli是其中的一个项目。这就是为什么我们看到一个“Tab”元素移动到了新行。
我们还需要添加justify-content之前在 CSS 中定义的 。这次，我们将其设置为center。这将使导航栏菜单项居中。由于某种原因，我们的导航栏项目有一些默认的填充。为了移除这些填充并确保所有项目都居中，我们可以将 设置padding为 0。我们还需要重置 ，background-color因为我们的背景颜色被限制在header上次设置的 70px 高度内。
第 2 步：#titleCSS
我们的导航栏在技术上是响应式的。它会根据屏幕大小而变化。但它看起来并不美观。我们只需要多一点 CSS 就可以让它达到我们想要的效果。我们将专门针对#title“导航栏教程”这个标题。因为这是我们的标题，所以我们希望它能脱颖而出，并独立成一行。我们可以通过使用另一个名为 的 Flexbox 属性来实现这一点flex-basis。此属性允许我们确定子元素或容器项在其容器内占用多少空间。我们将设置flex-basis为 100%。现在“导航栏教程”将独立成一行。
我们仍然希望#title像其他菜单项一样居中。我们可以简单地将其定义text-align为 居中。如果仔细观察，您会注意到“导航栏教程”仍然没有完全位于标题的中心。这是因为margin-right: auto我们之前添加了 ，将 移到了#title左侧。为了抵消这一点，我们将添加margin-left: 0。现在，“导航栏教程”已经完全居中了，正如我们想要的那样！
结论
恭喜！！你已经完成了响应式导航栏的设计！这些概念非常重要，所以不要就此打住。尝试创建一个新的网页，并运用你目前学到的概念，让它完全响应式。我会提供一些额外的资源，帮助你更深入地了解 Flexbox 和响应式设计。
一如既往，请随时给我一些建设性的反馈。我一直在努力进步。如果您希望我涵盖任何主题，请告诉我！非常感谢您的阅读！