Demo-Seite: Responsive Design mit Container Query
Die strichlierte Box ist ein section Tag, der als Container dient.
section {
container-type: inline-size;
}
Es wird unterschieden ob der Container eine Breite von unter 300px, über 600px oder dazwischen hat. Je nachdem werden die Überschriften und der Text innerhalb des Containers anders dargestellt:
@container (max-width: 300px) {
h3 {
color: blue;
}
h3, p {
font-size: 14px;
}
}
Nur eine Section
Überschrift
Ein bisschen Text. Und noch was. Ein Satz geht noch. Wenn Text dargestellt wird, sollte man ja darauf achten, das er nicht zu breit läuft. Das heisst, dass die Zeile nicht zu lange wird. Sonst kann man das nicht mehr gut lesen.
Mehrere Sections in einem Grid
Überschrift in 2fr
Ein bisschen Text. Und noch was. Ein Satz geht noch. Wenn Text dargestellt wird, sollte man ja darauf achten, das er nicht zu breit läuft. Das heisst, dass die Zeile nicht zu lange wird. Sonst kann man das nicht mehr gut lesen.
Überschrift in 3fr
Ein bisschen Text. Und noch was. Ein Satz geht noch. Wenn Text dargestellt wird, sollte man ja darauf achten, das er nicht zu breit läuft. Das heisst, dass die Zeile nicht zu lange wird. Sonst kann man das nicht mehr gut lesen.
Überschrift in 5fr
Ein bisschen Text. Und noch was. Ein Satz geht noch. Wenn Text dargestellt wird, sollte man ja darauf achten, das er nicht zu breit läuft. Das heisst, dass die Zeile nicht zu lange wird. Sonst kann man das nicht mehr gut lesen.
Mehrere Sections in einer Flexbox
Überschrift flex 1
Ein bisschen Text. Und noch was. Ein Satz geht noch. Wenn Text dargestellt wird, sollte man ja darauf achten, das er nicht zu breit läuft. Das heisst, dass die Zeile nicht zu lange wird. Sonst kann man das nicht mehr gut lesen.
Überschrift flex 1
Ein bisschen Text. Und noch was. Ein Satz geht noch. Wenn Text dargestellt wird, sollte man ja darauf achten, das er nicht zu breit läuft. Das heisst, dass die Zeile nicht zu lange wird. Sonst kann man das nicht mehr gut lesen.
Überschrift flex 1
Ein bisschen Text. Und noch was. Ein Satz geht noch. Wenn Text dargestellt wird, sollte man ja darauf achten, das er nicht zu breit läuft. Das heisst, dass die Zeile nicht zu lange wird. Sonst kann man das nicht mehr gut lesen.