2

横にメニューのあるロゴがあります：

ここに画像の説明を入力

これはHTMLです：

<div id="logomenuwrapper">
<div id="logo"><img src="img/logo_light.jpg"/></div>
<div id="menu">
    <ul>
        <li><a href="#">About</a></li>
        <li class="notfirst"><a href="#">Work</a></li>
        <li class="notfirst"><a href="mailto:maarten@codesigner.be?subject=Hello">Contact</a></li>
    </ul>
</div>
</div>

これはCSSです：

#logomenuwrapper{overflow:hidden;}
#logo
{
    padding-right:1.2%;float:left; max-width:100% !important;
    max-height:100% !important;
    display:block;
}
#menu{float:left;padding-left:1.2%;font-size:0.875em;border-left:1px solid #ea4a4a;}
#menu ul li.notfirst
{
    padding-top:0.3225em;
}

画面が小さくなるとメニューのフォントを小さくするメディア クエリをいくつか追加しました。

ある時点で、メニューはロゴよりも小さくなります。メニューに合わせてロゴのサイズを変更するには、何を追加すればよいですか? 私はすでに追加しました：

img {max-width:100%;}

小さな画面でどのように見えるかの写真 (ロゴが大きすぎることがわかります):

ここに画像の説明を入力

4

4 に答える 4

0

私はあなたがこれについて間違った方向に進んでいると思います。画面が小さいのに、なぜ文字を小さくするのですか? これはおそらく、メニューをクリックするのに十分な大きさのタッチ ターゲットがあることを確認する必要があるモバイル デバイスで発生します。テキストを同じサイズに保ち、パディング/マージンを追加してタッチターゲットを改善することもできますが、これにより、ロゴの横にあるこのメニューがさらに「大きく」なります.

最小サイズの代わりに、ナビゲーションをロゴの下に積み重ねてみてください。画面が大きくなるとメニューが見えなくなったら、現在のようにメニューをロゴの右側に移動します。これにより、小さなデバイス向けのデザインを強化しながら、テキストや画像のスケーリングを適切に行うことができます。

私はあなたのためにデモをまとめました。サイズを変更して新しいメニューの動作を確認できるように、必ず完全なプレビューを表示してください。

最小サイズで任意のパターンを使用できます。メニューが 1 行に簡単に収まるため、単純なスタック パターンを使用しました。将来、より多くのナビゲーション アイテムがあれば、アコーディオンを実行したり、オフ キャンバス アプローチに移行したりすることもできます。

さらに読む: Chris Coyier の記事(デザインをタブレットに適したものにすること) をチェックしてください。そこには素晴らしいヒントがいくつかあります。

また、タイプとタッチに関するTrent Walton の短い投稿もチェックしてください。

于 2013-06-22T21:28:29.620 に答える