0

そこで、max-widthプロパティを使用して注目の画像を拡大縮小しましたが、ナビゲーション画像アイコンでも同じ効果が得られるかどうか疑問に思っています。これは画像スプライトで実行できますか、それとも推奨される方法は何ですか？

4

3 に答える 3

3

メディアクエリのブレークポイントに応じて、異なる画像サイズをロードできます。 

/* 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');
   }
}
于 2012-01-04T17:33:51.780 に答える
2

それは本当にあなたがあなたのレイアウトをどれだけ変えたいか、そしてあなたがベンダーの特定の要件（例えばアップルのガイドライン）に一致する必要があるかどうかに依存します

すべてのメニュー画像が同じ高さで、より広い画面の場合は線形レイアウトを使用するWebサイトがあります。

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

デスクトップの場合、特定の幅と高さを「auto」に設定し、狭い画面の場合、特定の高さ（42px）と幅を「auto」に設定しました。

複数の画像に頼りたくないのは、長期にわたって維持するのが難しくなるからです。実際、私はメニューに画像を使用するのをやめ、cssを使用してすべてを実行しました（ただし、単調な画像スプライトは使用していません。非常に適切に拡大縮小する自家製の絵記号Webフォントを使用しています）

于 2012-01-06T07:38:21.547 に答える
1

クリスが言ったことを実行し、バックグラウンド位置を実行することでスプライトを使用できます。

高さ100％を使用して行うこともできます。

クリスが提案したことをお勧めします。

于 2012-01-04T18:26:25.403 に答える