Retina görüntü çözünürlüğünü kullanarak ortam sorguları

Question

Retina ekranını algılamak ve max-width belirtmek için medya sorgularını kullanmanın en iyi yolu nedir? Ben

@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) { 

} 

nasıl medya sorguları için eklerim kullanarak retina algılayabilir ? Ben

@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"); 
     } 
    } 
} 

yazmak Veya Retina ekranlar için değişen görüntüleri daha iyi bir yöntem yoktur musunuz? (retina ekran için medya sorgularına ekran boyutu için medya sorgusu ekleme)

Answer 1

Muhtemelen tüm retina ekranlarını CSS-tricks'in this makalesine göre kapsaydınız. Sanırım bunu zaten öğrendiniz. Diğer bir seçenek ise SVG'leri kullanmaktır, ancak bunları arka plan görüntüleri için kullanmam. SVG formatı, iki boyutlu şekiller ve simgeler için mükemmeldir, simge yazı tipleri daha hızlı işlenir.

"Ekran boyutu için retina ekranı için medya sorgularına nasıl medya sorgular eklenir" sorusuna gelince, gönderdiğiniz kod düzgün çalışmalıdır. Başka bir yöntem de aynen böyle birinci olanlara ikinci madde eklemek olacaktır: here açıklandığı üzere

@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"); 
    } 
} 

Eğer SCSS kullanıyorsanız, bir mixin oluşturun. Bu size zaman kazandıracak ve okunabilirliği önemli ölçüde artıracaktır.