スプライトは、サーバーリクエストの数を減らすクールな方法です。 多数のアイコンを1つのスプライトにパックし、CSSで各アイコンのオフセットを書き込むことができます。 ただし、このすべてをピクセルごとにカウントする必要があるのは非常に不便です。 ピクセル-ダイナミクスがないことを意味します。 ピクセルを使用する場合、段落内または見出し内のどちらに表示されるかに関係なく、スプライトは固定サイズで表示されます。 これは間違っている、それは私には思え、不快です。 しかし、動的なサイズのアイコンを表示する興味深い方法を見つけたようです。
まず、スプライトをピクセルで表される幅と高さのあるものとして考えるのをやめる必要があります。 ヘッダー内の画像内のスプライトのサイズは500 x 100ピクセルですが、サイズが10x2のスプライトと見なす必要があります。 実際、ピクセル数は何が違いますか？ 主なものは、幅が10個、高さが2個のアイコンが含まれていることです。
レイアウト中にスプライトを記述するときは、背景画像の幅と高さを相対的な単位で指定するだけです-EMを使用します。 スプライトのサイズは10 x 2であるため、次のように記述できます。
.icon { background-image: url(http://i.imgur.com/DV0Bl7B.png); display: inline-block; /* — 10, — 2. */ background-size: 10em 2em; /* 11 — , */ width: 1em; height: 1em; } /* . */ .icon-ok-black { background-position: -7em -1em; }
すべてのサイズは相対単位で示されるため、アイコンは自動的にフォントサイズに調整されます。タイトルでは、タイトルのフォントサイズに対応し、段落では、段落のフォントサイズに対応します。 たとえば、各アイコンのサイズを50ピクセルにして、1つのスプライトを作成できます。これらの50ピクセルは、現在のコンテキストで常に1emに拡大縮小されます。
ただし、ラスターイメージをスケーリングすると、グラフィックがぼやけることがあることに注意してください。 おそらく、この方法はベクトルグラフィックスに最適です-たとえば、SVG。 貴重なコメントをしてくれたBaNruに感謝します。
JSFiddleの例： jsfiddle.net/vdfqdfen