Pages

Resizable Container

Was ist ein Resizable Container?

Ein Resizable Container erlaubt dir, die Positionen der enthaltenen Elemente konstant zu halten, während sich deren Größe automatisch anpasst, wenn der Container skaliert wird. Dadurch bleibt deine Benutzeroberfläche auf verschiedenen Bildschirmgrößen visuell konsistent und responsiv.

Eigenschaften

• Elemente bleiben an ihrer relativen Position
• Größen skalieren proportional zur Containergröße
• Kein manueller Rechenaufwand für Positionen
• Eignet sich für responsives Layout ohne zusätzliche Logik

Wann solltest du ihn verwenden?

Nutze Resizable Container, wenn:

• Deine Oberfläche proportional skalieren soll
• Die visuelle Anordnung überall gleich bleiben soll
• Du eine einfache Lösung für Responsivität brauchst
• Du mit festen Seitenverhältnissen arbeitest (z. B. 16:9, 4:3)

Praxisbeispiel

Du entwirfst ein Dashboard für ein Panel mit 1280 x 800:

1. Du platzierst einen Button bei x = 100, y = 50, Größe 200 x 100
2. Wenn das Panel auf 640 x 400 verkleinert wird, skaliert der Button auf 100 x 50
3. Die Proportionen und Abstände bleiben erhalten