如何在导航栏中设置媒体查询以使其响应移动设备？

Question

我想让导航栏的左侧带有我的徽标，右侧带有选项卡，以响应移动设备。在移动视图中，观点元标记会将我的徽标放到导航标签下方。它还具有javascript中的滚动功能。对我来说现在回来并添加带有媒体查询的断点是否为时已晚？这个解决方案有简单的解决方法吗？我已经尝试了所有方法，但似乎无法使其正常工作。

.nav_bar {
  align-items: center;
  position: relative;
  height: 80px;
  width: 100%;
  transition: 0.2s ease;
  color: rgb(78, 78, 78);
}

.nav_bar ul li a.active-page {
  border-bottom: 1px solid;
}

.nav_bar .nav_ {
  margin: 0;
  padding: 0;
  display: inline-block;
  float: right;
  margin-right: 5%;
}

.nav_bar .nav_ .item {
  list-style: none;
  display: inline-block;
  font-size: 18px;
  padding: 5px;
  font-weight: 300;
  line-height: 80px;
  margin-right: 20px;
  transition: 0.5s ease;
}

.nav_bar .nav_ .item a {
  text-decoration: none;
  color: inherit;
}

.nav_bar .logo {
  color: rgb(50, 50, 50);
  float: left;
  display: inline-block;
  margin-top: 10px;
  margin-left: 5%;
  width: 40px;
  height: 40px;
  transition: 0.5s ease;
}

.nav_bar img {
  height: 40px;
  width: 40px;
  float: left;
  :
}

.scrolled {
  background-color: rgba(62, 62, 62, 0.4);
  color: white;
  transition: 0.5s ease;
}

.scrolled.nav_bar {
  height: 50px;
  background-color: rgba(62, 62, 62, 0.8);
  transition: 0.5s ease;
}

.scrolled.nav_bar .nav_ .item {
  line-height: 40px;
  transition: 0.5s ease;
}

.scrolled.nav_bar .logo {
  float: left;
  display: inline-block;
  margin-top: 5px;
  margin-left: 5%;
  width: 40px;
  height: 40px;
  ] transition: 0.5s ease;
}

<div class="nav_bar">
  <ul class="nav_">


    <li class="item">
      <a href="index.html" class='active-page'>Home</a>
    </li>

    <li class="item">
      <a href="about.html">About</a>
    </li>



    <li class="item">
      <a href="work.html">Work</a>
    </li>

    <li class="item">
      <a href="contact.html" class="contact">Contact</a>
    </li>


  </ul>

  <div class="logo">
    <a href="index.html"> <img class="logo" src="jhlogogrey.png" alt=""> </a>
  </div>
</div>

Answer 1

在CSS中编码特定的屏幕比例，然后在该区域内调整容器的位置，填充和位置。