Question

我正在尝试制作一个website我正在开发响应，到目前为止，我想要对浏览器窗口中的更改做出响应的元素运行良好，除了导航文本的大小和位置。

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>

我添加到CSS的媒体查询看起来像这样

@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; 
  }
}

屏幕调整大小后 - http://i.stack.imgur.com/jvaKe.png

Answer 1

您可以先将#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 */
 }

Answer 2

对于响应式导航，我使用此http://tinynav.viljamis.com/（其现代的小型屏幕响应式解决方案），因为您应该只使用em和％作为元素。

如何使浏览器调整大小的导航链接

2 个答案: