2

私はレスポンシブウェブサイトを構築しているので、モバイルデバイスとiPhoneのCSSスプライトについて読んでいます。私はこの記事を見つけました、それは正しいテクニックだと思いますが、説明はもっと良かったかもしれません。私はこれで終わった：

http://jsfiddle.net/H9FcH/

iPhoneで問題ないように見えるかどうか誰かに教えてもらえますか？その50％についてはよくわかりません。また、誰かより良い記事がありますか？

4

1 に答える 1

5

Retinebackground-size対応デバイスに指定するプロパティには、Retinaスプライト以外のサイズ、つまりRetinaスプライトの幅の半分と高さの半分が含まれている必要があります。スプライト内の単一のアイコンのサイズだけでなく、スプライト全体のサイズにする必要があります。

更新されたフィドル：http： //jsfiddle.net/jhogervorst/qr5fs/2/

スクリーンショット（Retina）：http: //i.stack.imgur.com/sIDnE.png

CSS：

@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) {
        .action {
            background-image: url(http://dl.dropbox.com/u/13823768/masonry/img/test-sprite2x.png);
            -moz-background-size: 153px 64px;
            -o-background-size: 153px 64px;
            -webkit-background-size: 153px 64px;
            background-size: 153px 64px;
        }
}
于 2012-04-28T22:09:15.617 に答える