0

我正在尝试使我正在开发的网站具有响应性，到目前为止，我想要响应浏览器窗口中的变化的元素运行良好，除了导航文本大小和位置......

构成网页的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

4

2 回答 2

0

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

于 2013-01-04T13:58:07.363 回答
0

您可以从减少#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 */
 }
于 2013-01-02T17:04:09.220 回答