web-dev-qa-db-ja.com

メディアクエリを使用したRetinaディスプレイの画像解像度

メディアクエリを使用して網膜ディスプレイを検出し、max-widthを指定する最良の方法は何ですか？使用して網膜を検出できます

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

}

メディアクエリに追加するにはどうすればよいですか？私は書きますか

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
 @media screen and ( max-width: 2000px){
     .holer{
         background:url("[email protected]");
       }
  }
}

または、Retinaディスプレイの画像を変更するためのより良い方法はありますか？ （Retinaディスプレイのメディアクエリに画面サイズのメディアクエリを追加）

cssmedia-queriesretina-display
10
Darlyn

CSS-tricksによる this の記事に従って、おそらくすべてのRetinaディスプレイをカバーするでしょう。私はあなたがすでにそれを見つけたと思います。もう1つのオプションは、SVGを使用することですが、背景画像には使用しません。 SVG形式は、2次元の形状やアイコンに最適ですが、アイコンフォントのレンダリングは高速です。

「画面サイズのメディアクエリをRetinaディスプレイのメディアクエリに追加する方法」という質問については、投稿したコードで問題なく動作するはずです。別の方法は、次のように、最初の句に2番目の句を追加することです。

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and ( max-width: 2000px),
only screen and (   min--moz-device-pixel-ratio: 2) and ( max-width: 2000px),
only screen and (     -o-min-device-pixel-ratio: 2/1) and ( max-width: 2000px),
only screen and (        min-device-pixel-ratio: 2) and ( max-width: 2000px),
only screen and (                min-resolution: 192dpi) and ( max-width: 2000px),
only screen and (                min-resolution: 2dppx) and ( max-width: 2000px) { 
    .holer {
        background:url("[email protected]");
    }
}

SCSSを使用している場合は、説明されているようにミックスインを作成します ここ 。これにより、時間を大幅に節約し、読みやすさが大幅に向上します。

3
JasonK