0

モバイル サイトで CSS を作成する際にスプライトを使用する必要があるのはなぜですか? そして、トリチウムでそれらをどのように実装しますか?

4

1 に答える 1

6

なぜ

簡単に言えば、ネットワーク リクエストを節約するためです。10kB のスプライトに対する 1 回のリクエストは、10kB の画像に対する 10 回のリクエストよりも、ネットワーク上ではるかに高速です。

さらに、その 1 つの圧縮された画像スプライトは、ネットワーク経由で大幅な節約をもたらします。たとえば、それぞれ約 4kB の 13 個の画像を取得します。これは、13 のネットワーク リクエストで 52kB です。スプライトを使用すると、1 つのネットワーク リクエストで 12kB の 1 つの画像にまとめることができます。大幅な節約！

独自のスプライトを作成する必要はありません。Moovweb が自動的にスプライトを生成します。

実装

imagesディレクトリにspritesという名前のフォルダを作成し、すべての画像をここに配置します。( spritesフォルダー内に複数のフォルダーを持つことができます。) Moovweb は自動的にスプライトを生成し、stylesheets/globalsディレクトリに というスタイルシートを作成します。このスタイルシートを にインポートすることを忘れないでください。_sprites.scssmain.scss

たとえば、サイトからすべての子猫の写真を含むスプライトを作成するには、画像フォルダー内のspritesというフォルダーにすべての子猫の画像を配置します。Moovweb は、imagesフォルダーに大きなスプライト イメージを作成します。また、stylesheets/globalsフォルダーにスタイルシート を作成します。_sprites.scss

スタイルシートで、Moovweb は各画像の一連のクラス、ミックスイン、および変数を定義します。名前の形式はsprites-filename. たとえば、上記のスプライト フォルダーの例では、cat.pngスプライト フォルダー内のアイコンのクラスは.sprites-cat.

イメージは、次の 3 つの方法のいずれかで使用できます。

  1. @extendスタイルシートの別のクラス/ID の下でorを使用@includeして、画像から同じスタイルを適用します

  2. 画像のクラスで Tritium を使用して新しい要素を挿入します。insert("div", class:"sprites-filename")

  3. Tritium を使用して既存の要素にクラスを追加します。add_class("sprites-filename")

于 2013-04-01T07:17:09.227 に答える