Schriftgrößen und -farben für mobile Geräte

Wenn Sie Schriften in der mobilen Darstellung ändern möchten.

Oftmals ist es so, dass wir gerne auf den mobilen Geräten eine andere Schriftgröße oder vielleicht auch Schriftfarbe einstellen möchten. Mit dem nachfolgenden CSS-Code ist das sehr einfach möglich.

 

Anmerkung: Die Erweiterung wurde mit einigen Design-Vorlagen getestet und mit einer hohen Wahrscheinlichkeit wird sie bei allen Vorlagen funktionieren.

 

Bevor Sie loslegen, sollten Sie wissen, dass Sie die Code-Schnipsel einfach nur in den Head-Bereich Ihrer Website kopieren müssen. Wenn Sie farblich etwas ändern möchten, wird Ihnen ein möglicher Weg der Farbcode-Ermittlung nachstehend aufgezeigt.

Variante 1 Schriftgröße (fontsize) anpassen und Änderung der Schriftfarbe(color).

<style type="text/css">
/*<![CDATA[*/

@media only screen and (max-width: 768px){
.j-module h1 { font-size: 20px!important; color: #ff0000!important; }
.j-module h2 { font-size: 18px!important; color: #333333!important; }
.j-module h3 { font-size: 10px!important; color: #555555!important; }

p { font-size: 15px; color: aqua; }
}
/*]]>*/
</style>

 

h1, h2, h3 - große, mittlere, kleine Überschrift. p -normaler Text. Zur Einstellung der Größe ändern Sie einfach die font-size. Den color-Wert können Sie beispielsweise über "Ein Weg zur Farbcode-Ermittlung" ganz einfach ermitteln - siehe Bild oberhalb.

 

Über die @media only ... -Anweisung wird gesteuert, dass die Änderung nur bei mobilen Geräten mit einer Darstellungsbreite bis 768 Pixel greift.

 

Variante 2 nur Schriftgröße(fontsize) ändern.

 

<style type="text/css">
/*<![CDATA[*/

@media only screen and (max-width: 768px){
.j-module h1 { font-size: 20px!important;  }
.j-module h2 { font-size: 18px!important;  }
.j-module h3 { font-size: 10px!important;  }

p { font-size: 15px;  }
}
/*]]>*/
</style>

Variante 3 - mediengenau, beispielsweise für Tablets.

 

@media only screen and ( min-width: 769px ) and ( max-width: 1024px) {

.module h1 {font.......}

}

Sie können mehrstufig abstufen und die Schriftgrößen und -farben gezielt für Smartphones und Tablets unterschiedlich einstellen.

Manche Dinge können so einfach sein - wir zeigen Ihnen den Weg.