固定 flex header 中的导航链接在 window 调整大小时被截断页面

Question

理想情况下，我希望在浏览器 window 缩小时保持相同的布局。我不知道我是否需要媒体查询来做到这一点。我试图使用 flex-shrink 但它没有任何效果。我以为 flex 有默认收缩属性？我认为部分问题是我有太多 css 可能相互冲突的规则 - 我试图让它看起来像线框图像（下图）。这是 codepen.

线框-

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-weight: unset;
}

a {
  text-decoration: none;
}

header {
  background-color: white;
  height: 64px;
  display: flex;
  justify-content: space-between;
  padding: 24px;
  align-items: center;
  display: fixed;
  z-index: 10;
  width: 100%;
  border-bottom: 1px solid black;
}

.logo {
  height: 32px;
  display: flex;
  align-items: center;
}

.logo img {
  height: 50px;
}

.logo h1 {
  font-family: 'Cantarell', sans-serif;
  text-transform: uppercase;
  color: gray;
}

.logo .bold {
  font-weight: 700;
  color: black;
}

nav {
  margin-right: 24px;
}

nav ul {
  display: inline-flex;
  list-style: none;
}

nav ul li {
  margin-left: 16px;
}

nav a {
  color: black;
  font-family: 'Cantarell', sans-serif;
  font-size: 20px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Colmar Academy</title>
  <link href="https://fonts.googleapis.com/css2?family=Cantarell:wght@400;700&display=swap" rel="stylesheet" />
  <link rel="icon" type="image/x-icon" href="images\ic-logo-white.svg" />
  <link href="reset.css" type="text/css" rel="stylesheet" />
  <link href="style.css" type="text/css" rel="stylesheet" />
</head>

<body>
  <header>
    <div class="logo">
      <img src="images\ic-logo.svg" alt="logo" />
      <h1><span class="bold">Colmar</span>Academy</h1>
    </div>
    <nav>
      <ul>
        <li><a href="#">On campus</a></li>
        <li><a href="#">Online</a></li>
        <li><a href="#">For companies</a></li>
        <li><a href="#">Sign in</a></li>
      </ul>
    </nav>
  </header>
</body>

</html>

Answer 1

您必须为您的元素设置媒体查询以在特定的浏览器宽度下调整它们的大小。请参阅我在下面添加的示例：

@media only screen and (max-width: 650px) {
  .bold,
  .logo > h1,
  nav > ul > li > a {
    font-size: smaller;
    white-space: nowrap;
  } 
  .logo {
    max-width: 100%;
  }
}

当然，您可以随意更改尺码。在下面的代码片段中查看它的工作情况。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-weight: unset;
}

a {
  text-decoration: none;
}

header {
  background-color: white;
  height: 64px;
  display: flex;
  justify-content: space-between;
  padding: 24px;
  align-items: center;
  display: fixed;
  z-index: 10;
  width: 100%;
  border-bottom: 1px solid black;
}

.logo {
  height: 32px;
  display: flex;
  align-items: center;
}

.logo img {
  height: 50px;
}

.logo h1 {
  font-family: "Cantarell", sans-serif;
  text-transform: uppercase;
  color: gray;
}

.logo .bold {
  font-weight: 700;
  color: black;
}

nav {
  margin-right: 24px;
}

nav ul {
  display: inline-flex;
  list-style: none;
}

nav ul li {
  margin-left: 16px;
}

nav a {
  color: black;
  font-family: "Cantarell", sans-serif;
  font-size: 20px;
}

@media only screen and (max-width: 650px) {
  .bold,
  .logo > h1,
  nav > ul > li > a {
    font-size: smaller;
    white-space: nowrap;
  } 
  .logo {
    max-width: 100%;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Colmar Academy</title>
  <link href="https://fonts.googleapis.com/css2?family=Cantarell:wght@400;700&display=swap" rel="stylesheet" />
  <link rel="icon" type="image/x-icon" href="images\ic-logo-white.svg" />
  <link href="reset.css" type="text/css" rel="stylesheet" />
  <link href="style.css" type="text/css" rel="stylesheet" />
</head>

<body>
  <header>
    <div class="logo">
      <img src='https://svgshare.com/i/esC.svg' title='' />
      <h1><span class="bold">Colmar</span>Academy</h1>
    </div>
    <nav>
      <ul class="nav-links">
        <li><a href="#">On campus</a></li>
        <li><a href="#">Online</a></li>
        <li><a href="#">For companies</a></li>
        <li><a href="#">Sign in</a></li>
      </ul>
    </nav>
  </header>
</body>

</html>

固定 flex header 中的导航链接在 window 调整大小时被截断页面

Nav links in fixed flex header get cut off page when window is resized

html

css

flexbox

header

nav