Birden çok alan genişliği belirtme

Katie Hempenius

Bu demoyu deneyin

• Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a basın.

• Tarayıcının farklı resimler yüklediğini ve farklı tarayıcı boyutlarında farklı düzenler kullandığını görmek için uygulamayı farklı boyutlardaki tarayıcı pencerelerinde yeniden yükleyin.

Kodu göster

• Bu işlevin çalışmasını sağlayan kod için index.html ödeme yapın:

<img src="flower.jpg"
  srcset="flower-small.jpg 480w, flower-large.jpg 800w"
  sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 800px">

Neden böyle oldu?

sizes özelliğinin değeri, resim görüntüleme genişliğinin şu şekilde olacağını belirtir: 480 piksele kadar genişliğe kadar görüntü alanlarında "görüntü alanı genişliğinin% 100'ü", 481-1.024 piksel genişliğindeki ekranlarda "görüntü alanı genişliğinin% 50'si" ve 1.024 pikselden geniş ekranlarda 800 piksel. Bu genişlikler, CSS'de belirtilen genişliklerle eşleşir.

Birden fazla alan genişliği belirtme olanağı, farklı görüntü alanı boyutları için farklı stiller (yani resim genişlikleri) kullanan sayfa düzenlerine uyum sağlar.

Birden fazla alan genişliği nasıl belirtilir?

• Birden çok alan genişliği belirtmek için virgülle ayrılmış bir liste kullanın. Son öğe hariç her liste öğesi, bir medya koşulundan (ör. max-width veya min-width) ve bir alan genişliğinden oluşur.
• Bu listedeki son öğe, varsayılan alan genişliğidir. Bu varsayılan ayardır ve bir medya koşulu belirtmeniz gerekmez.
• İstediğiniz sayıda alan genişliği listeleyebilirsiniz. srcset öğesinde listelenen resim sayısı önemli değildir.

• Alan genişliği çeşitli birimler kullanılarak belirtilebilir. Aşağıdakilerin tümü geçerli genişliklerdir:

• 100px

• 33vw

• 20em

• calc(50vw-10px)

Aşağıdaki değer geçerli bir genişlik değil:

• 25% (yüzdeler, boyutlar özelliğiyle birlikte kullanılamaz)