Die Media-Queries bringen mich zum Heulen...

[Rolf B]

Hallo MichaelS,

die Responsivität deiner Seite hatte ich bisher noch nicht im Blick. Wenn Du 3 CSS Dateien einbettest und jede einen @media Block hat, sollten sie aber auch alle 3 geladen werden. Prüfe das in den Entwicklerwerkzeugen - im Inspektor (sind die <link> Elemente da) und im Netzwerk-Tab (wird die .css Datei geladen). Je nach Hoster hast Du ggf. veraltete Daten in einem Cache, eliminiere das zur Not durch einen Cache-Buster (hänge sowas wie ?bust=8234723 an die URL an, der Parametername ist frei wählbar, die Zahl ist ein Zufallswert, verändere den Wert um ein Neuladen zu erzwingen. Hintergrund: Caches beachten URL Parameter und cachen nur URLs mit komplett identischer URL, aber dem Webserver ist beim Laden der CSS Datei der Parameter egal).

Kannst Du die Seite auf euren Server bringen - z.B. in ein test-Verzeichnis? Dann könnte man sich live anschauen, was da passiert.

Es ist allerdings wenig sinnvoll, das komplette CSS für 3 Breiten vorzuhalten. Das meiste wird gleich sein. Baue die Seite deshalb für die minimale Breite auf (mobile first Ansatz) und füge dann CSS für breitere Viewports hinzu, die dann Dinge nebeneinander setzen oder vergrößeren.

Gib deinem Body nicht width:100vw. Bei breiten Screens ist das unlesbar. Setze lediglich eine max-width von ca 60em - je nach Vorhandensein von Deko-Elementen auf der Seite kann man das noch etwas variieren. Mit margin:0 auto zentrierst Du den Inhalt dann horizontal; das hast Du schon drin. Ok.

Eins stößt mir noch auf: Die font-size Angaben in vw. Die führen in der aktuellen Form dazu, dass auf kleinen Viewports die Schrift viel zu klein ist. Auf einem sehr breiten Bildschirm (und meiner ist 3840px breit!) dagegen ist sie viel zu riesig.

Wir hatten das Thema Fontsize basierend auf Viewportbreite früher schon einmal, ich weiß allerdings nicht, ob im Zusammenhang mit Dir. Wenn ich in deinem Body aber font-size: calc(0.8em + 0.6vw); sehe, dann glaube ich, dass es für deine Seite war.

Empfehlung: Vergib auf dem :root Element eine Basis-Fontsize. Wenn die basierend auf der Viewportbreite sein soll, dann so, dass es eine Minimal- und Maximalgröße gibt. Dazu kann man die clamp-Funktion verwenden. Die ist ist seit 2 Jahren in allen Browsern außer IE verfügbar, aber der interessiert nicht mehr. Ein älteres iPad, das nicht upgedated wurde, könnte aber schon betroffen sein. Diese Geräte ignoreren clamp und würden die Standardfontgröße des Gerätes verwenden, UND DAS IST OKAY SO.

:root {
   font-size: clamp(0.9rem, 2vw, 2rem);
}

Das sind beispielhafte Werte, die Du für Dich prüfen solltest. Angegeben wird Minimum, flexibler Wert und Maximum. Das :root Element ist die höchste Ebene im Elementbaum, d.h. wenn nichts weiter festgelegt wird, gilt diese Angabe für alle. Wenn Du dann für Überschriften oder Textabschnitte andere Fontgrößen haben möchtest, setze sie in rem. Damit stehen sie in Relation zur Basisfontgröße und skalieren genau wie diese mit der Viewportbreite. Ich rate dazu, 1rem als Schriftgröße nicht zu sehr zu unterschreiten, vor allem, wenn Du ein älteres Publikum hast.

Rolf