web-dev-qa-db-ja.com

@ 2x、@ 3x、および@ 4xイメージのメディアクエリ

現在開発中のサイトでは、さまざまなピクセル比をサポートしようとしています。また、必要なブラウザプレフィックスを提供して、合理的な範囲内でさまざまなデバイス/ブラウザをサポートできるようにします。また、可能な限りSVGを使用していますが、写真画像用のソリューションが必要です。理想的には、以下を提供したいと思います。

  1. @ 1x画像（ピクセル比1.0）
  2. @ 2x画像（ピクセル比1.25+）
  3. @ 3x画像（ピクセル比2.25+）
  4. @ 4x画像（ピクセル比3.25+）

私の質問は、これを達成するためにメディアクエリを作成する最善の方法は何でしょうか？私の主な関心事は、私の主張が私が達成しようとしているものに対して正しいことです。ご提案やアドバイスをいただければ幸いです。現在、私のコードは次のとおりです。

/* @1x Images (Pixel Ratio 1.0) */
#dgst_shopping_bag {background-image:url(img/shopping_bag.png);}

/* @2x Images (Pixel Ratio of 1.25+) */
@media only screen and (-o-min-device-pixel-ratio: 5/4),
       only screen and (-webkit-min-device-pixel-ratio: 1.25),
       only screen and (min-device-pixel-ratio: 1.25),
       only screen and (min-resolution: 1.25dppx) {
    #dgst_shopping_bag {background-image:url(img/[email protected]);}
}

/* @3x Images (Pixel Ratio of 2.25+) */
@media only screen and (-o-min-device-pixel-ratio: 9/4),
       only screen and (-webkit-min-device-pixel-ratio: 2.25),
       only screen and (min-device-pixel-ratio: 2.25),
       only screen and (min-resolution: 2.25dppx) {
    #dgst_shopping_bag {background-image:url(img/[email protected]);}
}

/* @4x Images (Pixel Ratio of 3.25+) */ 
@media only screen and (-o-min-device-pixel-ratio: 13/4),
       only screen and (-webkit-min-device-pixel-ratio: 3.25),
       only screen and (min-device-pixel-ratio: 3.25),
       only screen and (min-resolution: 3.25dppx) {
    #dgst_shopping_bag {background-image:url(img/[email protected]);}
}

代替案1：私は<picture>タグでこれを達成します。サポートしていないブラウザに代替コンテンツを提供できることはわかっています<picture>、それを利用する際の私の主な関心事です。複数のピクセル比の写真を提供するためのベストプラクティスになると思いますか？

cssimagecss3media-queriesretina-display
20
Mastrianni

まあ、背景画像とpictureなどのインライン画像要素との明らかな機能の違いを無視すると、2つの間に長所と短所がいくつかあります。

インライン画像の長所/ background-imageの短所：

インラインスタイルに対してメディアクエリを使用する方法はないため、background-imageを指定するには、タグとは別の背景画像が必要な要素に対してセレクターを宣言する必要があります。これにより、動的に作成された要素に対するこのソリューションが複雑になります。

また、異なるピクセル比の画像のみを提供することに関心がある場合は、srcset要素の代わりに、imgタグの picture属性 を使用できます。 picture要素にはより多くのマークアップが必要であり、これには不要な多くの機能があり、さらにsrcsetのサポートがわずかに優れています。

background-imageの長所/インライン画像の短所：

解像度ベースのメディアクエリ はるかに優れたサポートpicture要素 および srcset属性 一部のブラウザは、現時点ではpicture要素またはsrcset属性をサポートしていませんが、サポートは改善されています。

ちなみに、16より古いバージョンのFirefoxのブラウザサポートを最大化する場合は、 min--moz-device-pixel-ratioセレクター を追加できます。これは、-webkit-min-device-pixel-ratioと同じ構文です。 CSSを使用した例を次に示します。

/* @2x Images (Pixel Ratio of 1.25+) */
@media only screen and (-o-min-device-pixel-ratio: 5/4),
       only screen and (-webkit-min-device-pixel-ratio: 1.25),
       only screen and (min--moz-device-pixel-ratio: 1.25),
       only screen and (min-device-pixel-ratio: 1.25),
       only screen and (min-resolution: 1.25dppx) {
    #dgst_shopping_bag {background-image:url(img/[email protected]);}
}

ベストプラクティス？

背景画像が必要な場所にはメディアクエリを使用し、インライン画像が必要な場所にはsrcsetまたはpictureを使用することをお勧めします。ただし、この時点で、サポートする必要があるブラウザーを検討することがより重要な場合があります。それについては、互換性のあるリンクを参照してください（おそらく、古いブラウザーを使用している多くの人がおそらく標準解像度モニターも使用していると考えられます）。

17
Alexander O'Mara

本当にimg[srcset]属性。そのサポートは、別の回答の状態よりもはるかに優れています。現在のChromeandSafariはこの属性をサポートしています。そして、knowそれは、Firefox 38およびIE 12もサポートします。さらに、構文は単純なプログレッシブ拡張を行うことができ、複雑なメディアクエリを記述する必要はありません。

これはどのように見えるかです：

<img src="img/[email protected]" srcset="img/[email protected] 2x, img/[email protected] 3x" />

また、サポートしていないブラウザーにサポートを追加する場合は、 differentpolyfills から選択できます。

ポリフィルを使用する場合は、マークアップを次のように変更できます。

<img srcset="img/[email protected], img/[email protected] 2x, img/[email protected] 3x" />
7
alexander farkas