0

次のようなヘッダーがあります。

<header id="wrapper">
    <div class="container clearfix">
    <h1 id="logo" class="alignleft"> <a href="index.html">logo</a> </h1>
    <nav class="alignright">
      <ul id="nav">

       <li><a href="#">menu 1</a></li>
        <li><a href="#">menu 2</a></li>
        <li><a href="#">menu 3</a></li>
        <li><a href="#">menu 4</a></li>

      </ul>
    </nav>
    <div class="clear"></div>
  </div>
</header>

そしてcss定義のnav

ul#nav {
margin-top: 30px; 
margin-right: 50px;
}



ul#nav li { float:left; }
ul#nav li a { 
color:#9a9a9a; 
font-family: "champagne__limousinesbold", Arial, Helvetica, sans-serif; 
font-size:18px; 
font-weight:600; 
text-decoration:none; 
 margin:0px 0px 0px 15px; 
 display:inline-block; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; padding:5px 10px; }
ul#nav li a:hover, ul#nav li a.active { color:#474747;}
ul#nav li.active a { color:#fff; background:#474747; }

したがって、画面サイズが適度に大きい場合は正常に機能します。

ここに画像の説明を入力

ただし、画面が小さい場合、次のことが起こります。

ここに画像の説明を入力

これが起こらないように、ロゴ (小さくする) とナビゲーション メニュー (フォントを小さくするなど) の両方を最小化する方法はありますか?

フィドルを見てください

4

3 に答える 3

0

一言で言えば、そうです。画面サイズに基づいて CSS を調整するには、メディア クエリを使用する必要があります。

例えば：

@media screen and (max-width : 600px) {
    #logo {
        width: /* New width */
    }

    ul#nav li a {
        font-size: /* New font size */
    }
}

メディアクエリの詳細はこちら

于 2013-05-07T02:46:03.583 に答える