Yoğunluk açıklayıcıları kullanın

Katie Hempenius
Katie Hempenius
X

Bu Demoyu Keşfedin

  • Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran tam ekran.
  • Tarayıcının farklı şekilde yüklendiğini görmek için sayfayı farklı cihazlar kullanarak yeniden yükleyin. resim.

Bunun için cihaz emülatörünü kullanabilirsiniz. Belirli bir ekran arıyorsanız yoğunlukları varsa deneyebileceğiniz bazı cihazlar şunlardır:

1x yoğunluk Blackberry Playbook, birçok harici monitör
2x yoğunluk iPad veya iPhone 5/6
3x yoğunluk Galaxy S5 veya iPhone X
  • Bu işlevi sağlayan kod için index.html ödeme yapın.

İşleyiş şekli

Yoğunluk tanımlayıcıları kavramı çoğu kişi için pek iyi olmayabilir. Daha iyi anlamak için tarayıcının çalışma şekli hakkında biraz bilgi sahibi olmak faydalı olacaktır. bir şablondur.

Piksel nedir?

Pikselin ne olduğunu tanımlayarak başlayalım. Bu ses basit ama "piksel" pek çok anlama gelebilir:

Cihaz pikseli ("fiziksel piksel" olarak da bilinir)
. Bir cihazda gösterilebilecek en küçük renk noktası.
Mantıksal piksel
. Izgara üzerinde belirli bir konumun rengini belirten bilgilerdir. Bu piksel türünün kendi fiziksel boyutu yoktur.
CSS pikseli
. CSS spesifikasyonu, bir pikseli fiziksel bir ölçüm birimi olarak tanımlar. 1 piksel = Bir inçin 1/96'sı.

Piksel Yoğunluğu

Piksel yoğunluğu ("ekran yoğunluğu" veya "görüntü yoğunluğu" olarak da adlandırılır) belirli bir fiziksel alandaki cihaz piksellerinin yoğunluğunu ölçer. Bu genellikle inç başına piksel (ppi) kullanılarak ölçülür.

Yıllar boyunca, 96 ppi çok yaygın bir görüntü yoğunluğuydu (bu nedenle CSS, bir inçin 1/96'sı kadar olmalıdır). 1980'lerden itibaren varsayılan çözünürlük bir seçenektir. Ayrıca, CRT'nin çözümü. izleme başlıklı makaleyi inceleyin.

2000'lerde LED monitörler yaygınlaştıkça bu durum değişmeye başladı. Özellikle, Apple, 2010 yılında Retina ekranları kullanıma sunduğunda büyük bir etki yarattı. Bu ekranlar en az 192 ppi çözünürlüğe sahipti. Bu da çözünürlüğün iki katıydı. "normal" görüntüler (192 ppi/96 ppi = 2).

window.devicePixelRatio

Yeni görüntüleme teknolojisinin kullanıma sunulmasıyla birlikte, "cihaz pikselleri" değişmeye başladı fiziksel boyutta ve biçimde ve artık "CSS pikselleri" ile aynı boyutta değillerdi. Projenin vizyonu ve "cihaz piksellerinin" boyutu arasındaki ilişki ve "CSS pikselleri" dönüşüm artışının devicePixelRatio (bazen "CSS Pixel" olarak da adlandırılır) Oran").

devicePixelRatio, cihaz pikselleri ile CSS pikselleri arasındaki ilişkiyi tanımlar düzenlemenizi sağlar. 192 ppi cihazın devicePixelRatio değeri 2 (192) olmalıdır ppi/96 ppi = 2) çünkü "ekran piksellerinin 2'si 1 CSS pikseli boyutundadır".

Günümüzde çoğu cihazın cihaz piksel oranı 1,0 ile 4,0 arasında.

  • window.devicePixelRatio yazarak bir cihazın piksel yoğunluğunu belirleyin kontrol edin.

  • Piksel oranlarını görmek için bu tabloyu görüntüleyin yaygın cihazlar. Çoğu değer 1,0 ile 4,0 arasındadır.

Peki bu bilgileri nasıl uygularsınız?

Resimleri cihaz piksel oranına göre boyutlandırın

Resimlerin yüksek çözünürlüklü ekranlarda en iyi şekilde görünmesi için Farklı devicePixelRatios için farklı resim sürümleri sağlamak gerekir.

Cihaz Piksel Oranı Şunları gösterir: Bu cihazda bir <img> genişliği 250 piksel olan bir etiket kullanıyorsanız kaynak resim şu olduğunda en iyi şekilde görünür:
1 1 cihaz pikseli = 1 CSS pikseli 250 piksel genişlik
2 2 cihaz pikseli = 1 CSS pikseli 500 piksel genişlik
3 3 cihaz pikseli = 1 CSS pikseli 750 piksel genişlik

Önemli noktalar:

  • Resim düzenleyicilerde, dosya dizinlerinde ve mantıksal piksellerin ölçümüdür.
  • Yüksek çözünürlüklü ekranlar ve daha büyük ekranlar için daha büyük boyutlara sahip. Yalnızca daha küçük resimleri büyütmek, farklı resim versiyonları da var. Tarayıcı bu işlemi zaten yüksek çözünürlüklü bir resim sağlanmadı.

Birden çok
resmi sunmak için Yoğunluk Tanımlayıcıları'nı kullanma

"srcset " ile birlikte yoğunluk tanımlayıcıları özelliğinin değeri PixelRatios'a farklı resimler sunabilir.

  • index.html dosyasına göz atın ve <img> öğesine dikkat edin.
<img src="flower.jpg"
  srcset="flower-1x.jpg 1x,
          flower-2x.jpg 2x,
          flower-3x.jpg 3x">

Bu örnek kelimelerle ifade edilir:

  • 1x, 2x ve 3x, tarayıcıya belirten yoğunluk tanımlayıcılarıdır resmin hedeflendiği piksel yoğunluğu. Bu işlem, tarayıcıyı kaydeder Bu bilgiyi belirlemek için resim indirme ihtiyacını ortadan kaldırır.
  • Tarayıcı üç resim arasından seçim yapabilir: flower-1x.jpg (amaçlanan 1.0 piksel yoğunluğuna sahip tarayıcılar için), flower-2x.jpg (yani 2.0 piksel yoğunluğa sahip tarayıcılardan biri) ve flower-3x.jpg ( 3.0 piksel yoğunluğuna sahip tarayıcılarda) gösterilir.
  • flower.jpg, desteklenmeyen tarayıcılar için yedek resimdir srcset.

Nasıl kullanılır?

  • Yoğunluk tanımlayıcıları yazmak için bir cihazPixelRatio ve x birimi kullanın. Örneğin, Örneğin, birçok Retina ekranı için yoğunluk tanımlayıcısı (window.devicePixelRatio = 2) 2x olarak yazılır.
  • Yoğunluk tanımlayıcısı sağlanmazsa 1x olduğu varsayılır.
  • Yoğunluk tanımlayıcılarını dosya adlarına dahil etmek yaygın bir yöntemdir (ve yardımcı olabilir, ancak gerekli değildir. Resimlerde dosya adı.
  • sizes özelliği eklemenize gerek yoktur. sizes özelliği yalnızca genişlik tanımlayıcılarıyla birlikte kullanılır.