7

スタイルをできるだけ簡潔にするために、iPhone 4 などの 2 倍のピクセル密度のデバイスでページを表示する場合に含まれるメディア クエリ スタイルシートを使用したくありません。

そうは言っても、私がこのようなことをしただけで大丈夫でしょうか？

.icon-1 {
  background-image: url('my-image-64px.png');  // This image is 64 x 64
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 32px 32px;
}

これは、欠点なしで全面的に機能しますか? または、特定のピクセル密度を持つデバイスに対して何らかのメディア クエリを実行する必要がありますか?

4

3 に答える 3

9

はい、そうです。唯一の欠点は、非 Retina ディスプレイに必要なサイズよりもはるかに大きな画像をダウンロードすることです。メイン スタイルシートのすべてに非 Retina 画像を使用し (すべての画像に背景サイズを設定)、必要に応じてすべての画像 URL を Retina サイズの画像へのリンクで上書きする Retina スタイルシートを含めることをお勧めします。

もう少し手間がかかりますが、低速エッジのセルラー接続を使用しているユーザーは感謝します。

ああ、あなたの方法はあなたのためにあなたのイメージをダウンサンプリングします。画像に 1 ピクセル幅の線がある場合 (たとえば)、適切な方法で縮小されない場合があります。ただし、ほとんどのタイプの画像では、おそらく許容されます。

于 2011-03-30T01:31:10.120 に答える
3

「特定のピクセル密度を持つデバイスのメディアクエリ」に答えるには、答えはイエスです:

media='only screen and (-webkit-min-device-pixel-ratio: 2)

于 2012-03-22T19:51:59.623 に答える
2

dmackerman の投稿に加えて、高密度をサポートする Webkit 以外のブラウザー用のメディア クエリを含めるには、次のように記述できます。

@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

}

また

@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {

}

どちらも同じ結果を生み出しています。

于 2013-03-28T08:42:29.227 に答える