-1

幅 300 からタブレットの高解像度までのサイズをカバーするレスポンシブ モバイル サイトを構築する必要があります。

すべてのアイコン (合計 12 個のアイコン) にスプライトを使用して画像サイズを縮小し、メディア クエリ (デバイスごとに縮小する 3 つのスプライト) を使用することを検討しています。

このアプローチの経験がある人はいますか?

古い Android フォンが大きなスプライトのレンダリング/スケーリングに苦労するのではないかと心配していますか?

4

1 に答える 1

1

あなたが3つの異なるサイズを説明していると仮定すると、これにアプローチできる2つの方法があります（とにかく試しました）：

  • 3 つのイメージ サイズすべてを含むようにスプライトを構築し、背景位置を切り替えます (メディア クエリを使用)。
  • スプライトを一度最大サイズにし、CSS3background-sizeプロパティを使って画像を拡大・縮小します。

私は個人的にこのbackground-sizeアプローチを選択する傾向があります (ただし、これを網膜画像の 2 倍のサイズのスプライトの 2 番目のバージョンと組み合わせる傾向もあります)。

background-size は現在完全にはカバーされていませんが、使用できる通常の 3 つのベンダー プレフィックスに加えて、'normal' があることに注意してください。例えば：

-webkit-background-size: 100px 100px;
-moz-background-size: 100px 100px;
-o-background-size: 100px 100px;
background-size: 100px 100px;

番号付けは、CSS の他の場所と同じです: 幅、次に高さ。

要素のサイズを半分にしたい場合は、単に寸法を切り替えます。

-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
-o-background-size: 50px 50px;
background-size: 50px 50px;

ただし、そのビュー サイズでスプライトを使用する各要素の新しい背景位置も含める必要があることに注意してください。

于 2013-06-03T14:56:51.630 に答える