css - Retina ディスプレイの画像寸法

Question

通常表示用と Retina 表示用にそれぞれ40px X 40pxと80px X 80pxの 2 つのサイズのアイコンを作成しました。

これらの 2 つのサイズのアイコンを使用する適切な方法は何ですか?

Retina バージョンの要素のサイズを 80px X 80px に変更するか、background-size プロパティを使用して大きなアイコンを 40px X 40px サイズに合わせる必要がありますか?

Answer 1

Apple の Safari Web コンテンツ ガイドに従う必要があります。

Web ページのアイコンを指定する

Answer 2

通常バージョンとラティーナ バージョンの両方で CSS の寸法を同じに保ち、プロパティを使用して大きな画像を通常の寸法に合わせる必要があることがわかりましたbackground-size。

Answer 3

これらの「アイコン」をどのように使用しているかによって異なります。それらは Web アプリのアイコン、Web ページ内の画像、または背景画像ですか?

まず、Retina イメージには @x2.eg という名前を付ける必要があります。

標準

サンプル.png

網膜

sample@x2.png

Web アプリのアイコンについては、cpattersonv1 からの以前の回答を参照してください。

背景画像

これは、メディアクエリを使用して実現できます。Retina 対応デバイスを対象とするメディア クエリは、次のようになります。

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

メディア クエリ内から、背景画像に Retina 画像を指定できます。