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

【问题标题】：How to make Navigation links responsive to browser resize如何使导航链接响应浏览器调整大小
【发布时间】：2013-01-04 21:58:07
【问题描述】：

我正在尝试制作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

【问题讨论】：

当您缩小屏幕尺寸时，用户百分比。此外，删除唯一的屏幕。这将增加移动支持

标签： css layout web responsive-design media-queries

【解决方案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 */
 }

【讨论】：

【解决方案2】：

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

【讨论】：