Birden çok alan genişliği belirtme

Katie Hempenius
Katie Hempenius
X

Bu demoyu deneyin

  • Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a tam ekran basın.

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

Kodu görüntüleme

  • Bu işlemi gerçekleştiren kod için index.html adresine göz atı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 olmasını belirler: 480 piksele kadar geniş görüntü alanlarında "görüntü alanının% 100'ü", 481-1024 piksel genişliğindeki ekranlarda "görüntü alanının% 50'si" ve 1024'ten geniş ekranlarda 800 piksel. Bu genişlikler, CSS'de belirtilen genişliklerle eşleşir.

Birden fazla yuva genişliği belirtme özelliği, farklı görüntü alanı boyutları için farklı stil (yani resim genişlikleri) kullanan sayfa düzenlerini destekler.

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

  • Birden fazla alan genişliği belirtmek için virgülle ayrılmış 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 slot genişliğidir. Varsayılan olarak bu seçenek belirlenir. Bu nedenle, medya koşulu belirtmeniz gerekmez.
  • İstediğiniz sayıda reklam alanı genişliği listeleyebilirsiniz. srcset öğesinde listelenen resim sayısı önemli değildir.

  • Yuva 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ğıdakiler geçerli genişlikler değildir:

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