Css 如何使导航链接响应浏览器调整大小

我正在尝试做一个我正在开发的快速响应，到目前为止，我想让浏览器窗口中的元素对更改做出快速响应，除了导航文本的大小和位置外，其他元素都工作得很好

网页的HTML组成如下

<div id="nav">
   <ul>
      <li>
         <div class="navtext"><a href="index.php">Home</a></div>
      </li>
      <li>
         <div class="navtext"><a href="bio.php">Bio</a></div>
      </li>
      <li>
         <div class="navtext"><a href="resume.php">Resume</a></div>
      </li>
      <li>
         <div class="navtext"><a href="reel.php">Reel</a></div>
      </li>
      <li>
         <div class="navtext"><a href="recommendation.php">Recommendation</a></div>
      </li>
      <li>
         <div class="navtext"><a href="gallery.php">Gallery</a></div> 
      </li>
      <li>
         <div class="navtext"><a href="contact.php">Contact</a></div> 
      </li>
   </ul>
</div>

@media only screen and (max-width: 479px) {
   #nav{
      width: 905px;
      position: relative;
      float: right;
      margin-left: 500px;
   }

   #nav ul {
     list-style: none;
     padding: 10px 0px 0px 1px;
     margin: 0;
   }

   #nav ul li {
     list-style: none;
     float: left;
     padding: 0 0 0 20px;
     font-weight: normal;
  }

  .navtext a {
     font-size:2.2em;
     padding: 1px 5px 1px 5px; 
  }
}

---

调整屏幕大小后-

您可以从减小#nav div左侧的宽度和边距开始

#nav{
  width: 905px; /* too wide for (max-width: 479px) screen */
  position: relative;
  float: right;
  margin-left: 500px; /* too wide for (max-width: 479px) screen */
 }

---

对于响应性导航，我使用它（它的moderm外观响应性解决方案适用于小屏幕），当然，您应该只使用em和%作为元素

当你开始使用较小的屏幕尺寸时，用户百分比会降低。另外，卸下唯一的屏幕。这将增加移动支持