メディア照会を使用した網膜ディスプレイの画像解像度

Question

メディア照会を使用して網膜ディスプレイを検出し、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("background@2x.png"); 
     } 
    } 
} 

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

Answer 1

おそらく、CSSトリックでthisの記事に従ってすべての網膜ディスプレイをカバーするでしょう。私はあなたがすでにそれを見つけたと思います。もう1つの選択肢はSVGを使用することですが、私はそれらを背景画像に使用しません。 SVG形式は、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("background@2x.png"); 
    } 
} 

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