既に存在しない場合は、誰かが網膜と網膜以外のCSSスプライトの作り方に関する指示を与えることができたら大変感謝します。可能であれば、いくつかのCSSスプライトジェネレータを使用することをお勧めします。CSSスプライトジェネレータに網膜反転もありますか？
トピックに関連する：http://miekd.com/articles/using-css-sprites-to-optimize-your-website-for-retina-displays/
事前にあなたのすべてをありがとう！
.#spriteA,spriteB{
background-image: url(sprite.png);
width:25px;
height:25px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 240dpi) {
.#spriteA,spriteB{
background-image: url(spriteX2.png);
width:25px;
height:25px;
}
}
.spriteA{ background-position: 0 50%; }
.spriteB{ background-position: -31px 50%; }
この方法では、バックグラウンドの位置比率を50％：あなたは今のラフの線に沿って何かを定義することができ、あなたのCSSファイルでsprite.pngとspritex2.png
としてあなたのスプライトを保存）は、非網膜または網膜の解像度を使用しているかどうかにかかわらず維持されます。
これは古い質問ですが、この回答を追加すると、同様の質問をした他の人に役立ちます。
私はsmartspritesツールをいくつか更新し、網膜スプライトをサポートできるようにしました。このツールを使用すると、基本的にCSSに注釈を付けて、スプライトするイメージをツールに指示し、ツールを実行し、新しいイメージを参照するスプライトイメージと修正されたCSSを生成します。
このツールを使用すると、どのイメージをスプレーするか、スプライトを配置する方法、およびイメージごとのスプライトパディングなどをきめ細かくサポートできます。それが役に立てば幸い！ cssspritegenerator.net
もWEBP画像を生成し、大きな画像をより大きなサイズに来るので、私たちはバックで1サイズのスプライト@にそれらを削減する必要があることができます：ここで
は低& hiDef網膜スプライトを作成するための別のオンラインツールです。 ）
この目的のために、いくつかのタスクマネージャ、ミックスイン、オンラインジェネレータがあります。私は個人的に仕事マネージャーとしてgruntを使用し、Sprite Smithは私のプロジェクトのいくつかのモジュールとして使用します。
http://www.retinaspritegenerator.comを使用して、網膜をサポートするクイックスプライトを生成することもできます。それはまた、スプライトスミスのような配列アルゴリズムの選択肢を持っています。
そこにいくつかの驚くべき網膜スプライトジェネレータがあります。私は最近、私が個人的に愛しているものをいくつか使用しました。 3。Retina Sprites 4. Zero Sprites 5. Sprite Generator
前の回答で述べたように、Sprite Smithは1つのもっとすごい発電機です。
retinaサポート、オプションのCSS埋め込み、JSON出力が必要な場合は、このスレッドは古いですが、別の方法です：https://www.facetstudios.com/sprite-generator –