Flexbox标题，当在移动设备上时会变成下拉菜单

Question

我正在尝试使用flexbox作为标题创建一个网站。然而，它在移动设备上会中断，所以我想知道如果浏览器的宽度意味着它不能全部放在一行上，是否有办法让右侧的3个链接(查看代码以理解(折叠成汉堡菜单风格的下拉列表。

代码

Codepen链接

HTML

<header>
<!--Random placeholder logo-->
<img id="logo" src="https://www.goomlandscapes.co.nz/wp-content/uploads/2018/08/logo-placeholder.png" alt="Logo" />
<nav class="nav_links">
<li><a href="#">About Me</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</nav>
</header>

CSS

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
* {
font-family: "Montserrat", sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #24252a;
color: #edf0f1;
}
li, a, button {
font-weight: 500;
font-size: 16px;
text-decoration: none;
}
header {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 25px 7%;
padding-bottom: 27px;
}
#logo {
height: 36px;
width: auto;
cursor: pointer;
margin-right: auto;
}
.nav_links {
list-style: none;
}
.nav_links li {
display: inline-block;
padding: 0 20px;
}

Answer 1

您可以使用媒体查询来指定您希望菜单变成汉堡风格的浏览器宽度。正确的语法如下：

@media screen and (max-width: 768px) {
nav {
some-property: value;
}
}

每当浏览器宽度小于768px时，这将改变导航元素的样式。