<div class="browser">
  <div class="browser__header">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="browser__body">
    <div class="header">
      <h1 class="logo"><a href="https://www.w3cplus.com"><img src="https://www.w3cplus.com/sites/all/themes/w3cplusV2/images/logo.png" alt="W3cplus"></a></h1>
      <nav class="menu">
        <ul>
          <li><a href="https://www.w3cplus.com/blog/tags/686.html">会员专栏</a></li>
          <li><a href="https://www.w3cplus.com/CSS3">CSS</a></li>
          <li><a href="https://www.w3cplus.com/JavaScript">JavaScript</a></li>
          <li><a href="https://www.w3cplus.com/mobile">Mobile</a></li>
          <li><a href="https://www.w3cplus.com/svg-tutorial">SVG</a></li>
        </ul>
      </nav>
      <div class="menu__icon">
        <span>menu</span>
        <svg t="1638455499563" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6454" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
          <defs>
            <style type="text/css"></style>
          </defs>
          <path d="M170.666667 213.333333m64 0l554.666666 0q64 0 64 64l0 0q0 64-64 64l-554.666666 0q-64 0-64-64l0 0q0-64 64-64Z" fill="currentColor" p-id="6455"></path>
          <path d="M234.666667 640h554.666666a64 64 0 0 1 0 128h-554.666666a64 64 0 0 1 0-128z m0-213.333333h554.666666a64 64 0 0 1 0 128h-554.666666a64 64 0 0 1 0-128z" fill="currentColor" p-id="6456"></path>
        </svg>
      </div>
    </div>
  </div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

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

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  padding: 20px;

  display: grid;
  place-content: center;
}

.browser {
  display: grid;
  max-inline-size: 80vw;
  min-inline-size: 40vw;
  min-block-size: 60vh;
  grid-template-rows: min-content auto;
  overflow: hidden;
  resize: horizontal;
}

.browser__header {
  min-height: 60px;
  background-color: #435986;
  border-radius: 16px 16px 0 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
}

.browser__header > span {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #edc100;
}

.browser__header > span:first-child {
  background-color: #ff4275;
}

.browser__header > span:last-child {
  background-color: #6bcb7a;
}

.browser__body {
  background-color: #f5f5f5;
  border-radius: 0 0 10px 10px;
}

.header {
  min-height: 80px;
  background-color: #333;
  padding: 0 20px;
  display: grid;
  gap: 10px;
  grid-template-columns: min-content auto min-content;
  color: #fff;
  align-items: center;
}

.logo {
  width: 68px;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #00a3cf;
}

.logo img {
  max-width: 100%;
  height: auto;
  display: block;
}

.menu ul {
  list-style: none outside none;
  display: flex;
  align-items: center;
  gap: 20px;
}

.menu a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: #9e9e9e;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  font-size: 24px;
  white-space: nowrap;
}

.menu a:hover {
  color: #fff;
}

.menu__icon {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 24px;
}

.menu__icon span {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
}

.icon {
  width: 1.2em;
  height: 1.2em;
}

.browser {
  container-type: inline-size;
}

.menu {
  display: none;
}

@container (width > 768px) {
  .menu {
    display: block;
  }
  .menu__icon {
    display: none;
  }
}