Trick # 40 | Dieser Beitrag beinhaltet 647 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Die Grösse der Schriftarten Ihrer Website sind vielleicht untereinander stimmig; Ihnen scheint aber alles ein wenig zu klein – oder zu gross. Nun graust Ihnen, jede einzelne Schriftarteinstellung zu suchen und anzupassen? Ist oft auch gar nicht nötig. Das geht mit einem Mini-Code im CSS global. Und was der Font-Trick für Responsive Designer bedeuten kann, sagen wir auch gleich.
Die Codezeile könnte kürzer fast nicht sein. Sie fügen Sie in das CSS-Stylesheet Ihrer Website ein unter Design/Customizer/Zusätzliches CSS:
body { font-size:80% !important; }Der Code oben setzt alle gewohnten Schriftgrössen (z.B. Body, Sidebar und Footer) auf der gesamten Website auf 80 % des ursprünglichen Werts. Ob das eine sinnvolle und lesbare Verkleinerung ist, müssen Sie individuell entscheiden; der Font-Stil ist hier ein entscheidender Faktor.
Ich habe aber einen Hintergedanken und setze diesen unter den Titel:
Responsive Fonts für Codefaule
Weil: Eigentlich sind meine Fontgrössen untereinander ganz OK abgestimmt; sie sind aber für die kleinen Anzeigen der Mobilgeräte zu gross. Darum verwende ich als Anwendungsbeispiel einen ergänzten, umfangreicheren Codeschnipsel im CSS-Stylesheet. Enthalten sind Bedingungen, welche sich an der Anzeigebreite orientieren, sowie der oben vorgestellte CSS-Hack in jeweils angepasster Form:
/* Grosse Bildschirme über 1405px */
@media only screen and ( min-width: 1406px ) {
body { font-size:110% !important; }
}
/* Laptops & Desktops 1101-1405px */
@media only screen and ( min-width: 1101px ) and ( max-width: 1405px) {
body { font-size:100% !important; }
}
/* Tablets in Landscape-Modus 981-1100px */
@media only screen and ( min-width: 981px ) and ( max-width: 1100px ) {
body { font-size:90% !important; }
}
/* Tablets in Portrait-Modus 768-980px */
@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {
body { font-size:80% !important; }
}
/* Smartphones in Landscape-Modus 480-767px */
@media only screen and ( min-width: 480px ) and ( max-width: 767px ) {
body { font-size:70% !important; }
}
/* Smartphones im Portrait-Modus bis 479px */
@media only screen and ( max-width: 479px ) {
body { font-size:60% !important; }
}Der Wermutstropfen
Einen Haken hat die Sache: Wenn Sie im Stylesheet bereits kräftig mit dem CSS-Zusatz
!important
arbeiten, kapituliert der hier beschriebene CSS-Code kläglich. Der !important-Code lässt sich von einem weiteren !important nicht zuverlässig übersteuern. Und !more important kennt CSS leider (noch) nicht.
Werbung
Werbung
