Mehrere Anzeigenflächenbreiten angeben

Katie Hempenius
Katie Hempenius
X

Demo ausprobieren

  • Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf View App (App ansehen) und dann auf Fullscreen (Vollbild) Vollbild.

  • Laden Sie die App in Browserfenstern unterschiedlicher Größe neu, um zu sehen, wie der Browser bei verschiedenen Browsergrößen unterschiedliche Bilder lädt und unterschiedliche Layouts verwendet.

Code ansehen

  • Sehen Sie sich index.html an, um den Code zu finden, der dies ermöglicht:
<img src="flower.jpg"
  srcset="flower-small.jpg 480w, flower-large.jpg 800w"
  sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 800px">

Was passiert hier?

Der Wert des Attributs sizes gibt an, dass die Breite des Bildes „100 % der Breite des Darstellungsbereichs“ bei Darstellungsbereichen mit einer Breite von bis zu 480 Pixeln, „50 % der Breite des Darstellungsbereichs“ bei Bildschirmen mit einer Breite von 481 bis 1.024 Pixeln und 800 Pixel bei Bildschirmen mit einer Breite von mehr als 1.024 Pixeln beträgt. Diese Breiten entsprechen den im CSS angegebenen Breiten.

Wenn Sie mehrere Anzeigenflächenbreiten angeben, können Sie Seitenlayouts mit unterschiedlichen Designs (d. h. Bildbreiten) für verschiedene Darstellungsgrößen verwenden.

Mehrere Anzeigenflächenbreiten angeben

  • Verwenden Sie eine durch Kommas getrennte Liste, um mehrere Anzeigenflächenbreiten anzugeben. Jedes Listenelement, mit Ausnahme des letzten Elements, besteht aus einer Medienbedingung (z.B. max-width oder min-width) und einer Anzeigenflächenbreite.
  • Das letzte Element in dieser Liste ist die Standardbreite des Anzeigenblocks. Dies ist die Standardeinstellung, sodass Sie keine Medienbedingung angeben müssen.
  • Du kannst beliebig viele Slotbreiten auflisten. Die Anzahl der in srcset aufgeführten Bilder spielt keine Rolle.

  • Die Slotbreite kann in verschiedenen Einheiten angegeben werden. Folgende Breiten sind gültig:

  • 100px

  • 33vw

  • 20em

  • calc(50vw-10px)

Die folgende Breite ist ungültig:

  • 25% (Prozentangaben können nicht mit dem Attribut „Größe“ verwendet werden)