Wie kann man die Schriftgrösse auf einer Website auch “Responsive” machen?
Du kannst alle Schriftgrößen in einer relativen EInheit angeben.
w3schools.com/cssref/css_units.asp
Ich schlage vor, die Größe zuerst pixel-perfekt festzulegen und das alles dann in “rem” umrechnen und immer beide Angaben zu verwenden, damit auch CSS2 browser die Seite noch einigermaßen darstellen können. Die größe für das html-Element gibst du dann entweder in einer media-query für verschiedene Größen in em oder pixel an oder in einer viewport-relativen Einheit.
[code]html {
font-size: 16px; /* Die Standardgröße */
}
p {
font-size: 12px;
font-size: 0.75rem;
}
…
[/code]
Danke, für die Tipps ^^
Ich schlage vor, die Größe zuerst pixel-perfekt festzulegen und das alles dann in “rem” umrechnen und immer beide Angaben zu verwenden, damit auch CSS2 browser die Seite noch einigermaßen darstellen können
Hallo,
also ich lade je nach Bildschirmbreite im mobilen Theme das entsprechende CSS. D. h. man benötigt nur ein Haupt-CSS, worin ich das Haupt-Styling für das mobile Theme importiere und je nach Bildschirmbreite weitere CSS. Problem dabei sind diese neuen Super-Smartphones mit ihren Hochauflösenden Bildschrimen, sodass ich einfach eine maximale Viewport-Breite wähle und dann sieht es dort auch gut aus.
@import url("style.min.css") screen;
@import url("mobile-override.min.css") screen;
@import url("mobile-override-max-480px.min.css") screen and (max-width: 479px);
@import url("mobile-override-min-480px.min.css") screen and (min-width: 480px) and (max-width: 800px);
...
Vielleicht übersehe ich dabei etwas. Würde mich freuen, wenn man mich dann belehrt
Grüße do-it-yourself
Für aufwendigere Anpassungen -etwa Bild neben Text oder Bild unter Text je nach Größe des Darstellungsbereiches kann man solche media queries sinngemäß verwenden.
Für die Schriftgröße nimmt man einfach für den Fließtext 1em oder 100%
Eigentlich wäre das angesprochene 1rem besser, da gibt es aber dann das Problem, daß alte Programme die Einheit nicht kennen.
Deswegen schreibt man erst sowas wie 1em, dann 1rem.
Angaben in Pixeln zur Schriftgröße wird man immer vermeiden, es sei denn, man hat ein SVG-Dokument, wo man das gesamte Dokument von der Größe an den Darstellungsbereich anpaßt.
Hier sehe ich das Problem mit den pixelgenauen Hintergrundgrafiken bei Links zum Beispiel. Wenn man sie der Schriftgröße nach skaliert, franzen sie bzw. wenn sie kleiner grendert werden müssen, werden sie in jedem Ie sehr unscharf.
Deshalb bevorzuge ich die harte Größe über die Breite der Ansicht. Das sieht auf meinem 300px-Telefon so gut aus wie auf dem Iphone 6s und ist auf beiden nicht nur lesbar, sondern auf der gesamten Seite ist nichts unscharf oder “rutscht” bzw. fließt falsch. Selbst auf den Windowstelefonen von Nokia kann ich keine Fehler feststellen.
Das Problem umgeht man einfach, indem man keine pixelgenauen Graphiken verwendet - wozu auch?
Es gibt ja Methoden, das Bild an die Schriftgröße anzupassen, wozu sich SVG als Hintergrundgraphik gut eignet.
Aber es gibt natürlich auch Methoden, bei der man etwa die Größe einer Umrandung, die dann aus mehreren Graphiken besteht, an die Menge des Inhaltes anpassen kann.
Text in Pixelgraphik ist ja schon schlecht, weil das gar kein Text ist, also nicht lesbar, wenn die dekorative Hintergrundgraphik gar nicht präsentiert wird.
Die mehr oder weniger etablierte Methode ist dann auch wieder aufwendig - falls die Hintergrundgraphik präsentiert wird, läßt man den Elementinhalt verschwinden und läßt nur die Hintergrundgraphik wirken.
Man kann das so umständlich machen, hat dann aber eben das Problem der Anumtung einer nicht skalierbaren Schrift, wenn man Pixelgraphik verwendet.
