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

【问题标题】：Flexbox header that when on mobile becomes a dropdown menuFlexbox 标题，在移动设备上时变成下拉菜单
【发布时间】：2021-01-24 21:55:49
【问题描述】：

我正在尝试使用 flexbox 作为标题创建网站。但是，它在移动设备上会中断，所以我想知道是否有办法使右侧的 3 个链接（查看代码以了解）折叠成汉堡菜单样式的下拉菜单，如果浏览器的宽度意味着它不会不是所有的都适合一行。

代码

Codepen Link

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;
}

【问题讨论】：

您可能会发现 W3Schools 中有关响应式设计的这一部分也很有帮助：w3schools.com/css/css_rwd_mediaqueries.asp

标签： html css flexbox responsive-design

【解决方案1】：

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

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

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

【讨论】：