Beispiel: Flexible Breite in Prozenten
Anhand dieses Beispiels sieht man einen Effekt des "liquid designs". Die Breite
der Seite wird durch die Größe des viewports bestimmt, nicht umgekehrt. Die Textzeilen brechen automatisch um,
so dass kein horizontales Scrollen erforderlich wird. Erst ab 500px Breite erscheint der horizontale
Scrollbalken (in standardkonformen Browsern). Im IE,
der die Anweisung min-width, (also minimale Breite) bis Version 7 nicht versteht, erscheint er
erst deutlich später.
Beispiel: Textbock mit fixer Größe in Pixel:
- Listenpunkt eins
- Listenpunkt zwei
- Listenpunkt drei
- Listenpunkt vier
Skaliert man die Schriftgröße, sieht man in der ersten Textbox deutlich den negativen Effekt der unflexiblen Angaben in Pixel. Hier verschwindet Text, der über die Boxdimension hinüber geht.
(Da der IE bis Version 7 entgegen aller Standards Angaben wie width und
height gleich wie min-width bzw. min-height interpretiert,
muss noch die Anweisung overflow:hidden; eingefügt werden.
Sonst würde sich die Box trotzdem anpassen, wenn größere Dimensionen durch den Inhalt nötig werden.
Standardkonforme Browser zeigen dieses Verhalten nicht.
Nur eine von vielen nicht standardkonformen Eigenheiten des IE.)
Beispiel: Textblock mit flexibler Größe in em:
- Listenpunkt eins
- Listenpunkt zwei
- Listenpunkt drei
- Listenpunkt vier
Die zweite Box ist 5em hoch und 8em breit. Die Maßeinheit em richtet sich
nach den Ausmaßen der Buchstaben "M", und ist daher auch von der Skalierung der Schrift abhängig.
Dadurch ändert sie ihre Größe propotional zur Schriftgröße, sobald die Schriftgröße anders skaliert wird.
Somit bleibt der Text in jedem Falle lesbar und verschwindet nicht an den Grenzen einer in Pixel
dimensionierten Textbox.