Web sitem görüntüleri Retina ekranlar sahip kullanıcılar için bulanık görünebilir görüntüler. (Örneğin, Retina MacBook Pro'da). Görüntüyü aynı görünen boyutu tutarkenCSS
Nasıl, standart boyutlu görüntüler herkese ben Retina ekranlar ile ziyaretçilere yüksek çözünürlüklü resimler sunar, ama? HTML'inizde
, şöyle bir <div> oluşturun:
<div class="ninjas-image"></div>
Ve CSS'nizde
ekleyin: Burada.ninjas-image {
background-image: url('ninja-devices.png');
width: 410px;
height: 450px;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
.ninjas-image {
background-image: url('[email protected]');
background-size: 410px 450px;
}
}
sihirli CSS @media sorguda olduğunu. Cihazın bir "cihaz pikseli oranı" 1,5 (144 dpi) veya daha fazla olduğunda rapor aldığımız, çift boyutlu bir resmimiz ([email protected]) var. Bu şekilde yapmak, retina olmayan cihazlara orijinal, daha küçük görüntü sunarak bant genişliğinden tasarruf etmenizi sağlar ve elbette retina cihazlarında mükemmel görünür.
Not: Bu cevap en iyi uygulamaları yansıtacak şekilde 2016 yılında güncellendi
. min-device-pixel-ratio standarda uymadı. Bunun yerine, standarda min-resolution eklenmiştir, ancak masaüstü ve mobil Safari, yazma sırasında desteklememektedir (bu nedenle -webkit-min-device-pixel-ratio geri dönüşü). En güncel bilgileri kontrol edebilirsiniz: http://caniuse.com/#feat=css-media-resolution. - Biz oranın 1.5 veya daha yüksek olduğu çoklu davalarını için aşağıdaki kullanıyorum
Bu kodunun nasıl çalıştığını açıklamak isteyebilirsiniz: vb medya sorgu ve 'background-size' bildirimleri amacı var ve ne. – BoltClock
@BoltClock biraz daha açıklama eklenmiş ve önerilen şekilde -webkit-background-boyutu kaldırıldı mı (Sen ... bu arada, artık '-webkit-arka plan-size' gerekmez). Teşekkürler! –
Sadece web kümesine özel mi yoksa başka vedor önekleri mi var? Ayrıca -moz olduğunu sanmıyorum – mastazi
bu hesaba fazla cihaz ve tarayıcılar alır:
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
Biz bizim tüm sitesi Retina etkin: http://www.embraceware.com/
@ChrisNolet, orijinaline geri dönmek isterseniz, bir geri alma yapmalı ve yeniden düzenlemeye çalışmamalısınız. – psubsee2003
Üzgünüm @ psubsee2003 - bunu nasıl yapacağınızdan emin değil! Bu sayfada geri alma bağlantıları görmüyorum: http://stackoverflow.com/posts/11063689/revisions. Yardım elini uzatır mısın? Teşekkürler. –
@ChrisNolet benim kötü ... 2K temsilcisi olana kadar geri alma yeteneğini alamadım. Onu senin için geri alacağım. – psubsee2003
bir JavaScript çözümü: [retinajs] (http://retinajs.com/) –