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 basın. Ardından, Tam ekran tam ekran.

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

Kodu göster

  • Bu işlevi sağlayan kodu bulmak 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 şöyle olacağını belirtir: "Görüntü alanı genişliğinin% 100'ü" 480 piksele kadar genişliğe sahip görüntü alanlarında, "görüntü alanının% 50'si genişlik" 481-1024 piksel genişliğindeki ekranlarda ve 1024 pikselden geniş ekranlarda 800 piksel olduğunda. Bu genişlikler CSS'de belirtilen genişliklerle eşleşmelidir.

Birden fazla alan genişliği belirtme olanağı, birden fazla alan kullanan sayfa düzenlerini destekler. farklı görünüm boyutları için farklı stil özellikleri (yani resim genişlikleri) kullanabilirsiniz.

Birden fazla alan genişliği belirtme

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

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

  • 100px

  • 33vw

  • 20em

  • calc(50vw-10px)

Aşağıdakiler geçerli bir genişlik değildir:

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