使导航栏响应性的好方法

@media screen and (max-width: 768px) {
  .navbar {
    display: none;
  }
}

@media screen and (min-width: 769px) {
  .navbar {
    display: block;
  }
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar li {
  margin-right: 10px;
}

.navbar a {
  text-decoration: none;
  color: #000;
}

<nav class="navbar">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
  <select class="mobile-menu">
    <option value="#">首页</option>
    <option value="#">产品</option>
    <option value="#">关于我们</option>
    <option value="#">联系我们</option>
  </select>
</nav>

.mobile-menu {
  display: none;
}

@media screen and (max-width: 768px) {
  .navbar ul {
    display: none;
  }
  
  .mobile-menu {
    display: block;
  }
}