0

開発中のウェブサイトをレスポンシブにしようとしていますが、これまでのところ、ナビゲーションテキストのサイズと位置を除いて、ブラウザウィンドウの変更にレスポンシブにしたい要素はうまく機能しています...

Webページを構成する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

#navdivの幅とマージン左を小さくすることから始めることができます

#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 に答える
0

レスポンシブナビゲーションには、このhttp://tinynav.viljamis.com/（小さな画面向けのモダンな外観のレスポンシブソリューション）を使用します。そのため、要素にはemと％のみを使用する必要があります。

于 2013-01-04T13:58:07.363 に答える