レスポンシブルデザインのナビゲーションアイコンを拡大縮小することは可能ですか？

Question

max-widthプロパティを使って注目画像を拡大しましたが、nav imageアイコンでも同じ効果が得られるのでしょうか？イメージスプライトでこれを行うことができますか、または推奨される方法は何ですか？

Answer 1

メディアクエリのブレークポイントに応じて、異なるイメージサイズを読み込むことができます。

/* Smartphones (portrait) ----------- */ 
    @media only screen 
    and (max-width : 320px) { 
     #navIcon { 
     background-image:url('small.jpg'); 
     } 
    } 


/* Desktops and laptops ----------- */ 
@media only screen 
and (min-width : 1224px) { 
    #navIcon { 
    background-image:url('normal.jpg'); 
    } 
} 

Answer 2

あなたは、クリスが言ったことを行うことができますし、バックグラウンド位置を行うことによってスプライトを使用します。

また、100％の高さで使用することもできます。

私はKrisが提案したものをお勧めします。

Answer 3

は、それは本当にあなたのレイアウトを変更したいどのくらいに依存し、あなたが（たとえば、Appleのガイドライン）

のベンダーの特定の要件に合致する必要がある場合、私はウェブサイトを持っていたところ、すべてのメニュー画像同じ高さであり、広い画面では線形レイアウトを使用しました。

小さな画面に変更した分メニューアイコンには、@media固有のサイズと配置要件が含まれていました。例えば、私はそれらを積み重ねたいと思っていましたが、私はそれらを42ピクセル高くしたいと思っていました（Appleがタッチスクリーンのタッチ可能な最小サイズだと言っているもの）

デスクトップの幅と高さを 'auto'狭い画面では、特定の高さ（42ピクセル）と幅が 'auto'に設定されていました。

時間の経過とともにメンテナンスするのが難しくなるため、複数の画像に頼るのは嫌です。実際には、私は自分のメニューに画像を使っていないし、CSSを使ってすべてをやったことがあります（単なるイメージスプライトではありません）。