Responsive Textgröße 
Author: Klaus W.
Visited 1336,
Followers 1,
Shared 0
Im Rahmen der Erstellung einer responiven Seite möchte ich den Text im Body einer Seite in Abhängigkeit des Vieports ausgeben.
Frage 1: Wo ist der entsprechender Code einzufügen, der den durch WSX5 generierten Code einer Seite überlagert und eine Textgröße entsprechend meiner Vorstellung erzwingt ?
Frage 2: Wie sieht das entsprechende Coding aus ? ... so etwa ?:
<style>
@media (max-width: 1023.9px) and (min-width: 720px) {
* {font-size:80% !important;}
}
</style>
Posted on the
Author
... alle meine bisherigen Versuche haben nicht zum Erfolg geführt.
Kommt jetzt darauf an ob der Code nur für eine Seite wirken soll oder für alle Seiten?
Für alle Seite wäre es unter "1" Erweitert Seo& Code Reiter "Code" vor dem </head> Tag !
<style>
@media (max-width: 1023.9px) and (min-width: 720px) {
#imPage {font-size:80% !important;}
}
</style>
Dieser Code bewirkt aber nur die Verkleinerung zwischen 720px und 1023.9px ! Wenn jetzt aber in einem Text-Objekt explizit eine andere Schrift ausgewählt wird, dann hat diese wieder Vorrang!
Bewirkt dieser Code die Anpassung der Schriftgröße bei responsiv Ansichten?
Das wäre ja mal eine super Sache.
Mich nervt es auch schon lange das die Schriften groß bleiben
Nein, dieser Code ist nicht ein Supercode für die mobile Verkleinerung der Schriften. Das wäre ja einfach und hätte INCO schon längst eingebaut. Das ist alles individuell zu machen.
Author
@ Andreas, ich habe den Code in 'SEO & Code' gepackt, sowie ein anderes mal über 3 > Eigenschaft > Erweitert. In beiden Fällen bleibt die ursprüngliche Schriftgröße bei allen 'Verzerrungen' die ich mit dem Browser anstelle.
Du sagst ja, dass die Schriftgröße im Objekt selbst Vorrang hat. Damit meinst du sicher, wenn ich auch dort explizit ein Coding einbringe ... richtig ? Denn eine Schriftgröße muss ich ja über die X5-Oberfläche angeben.
@ Michael, wenn du zum Ziel kommst, dann lass es mich doch bitte wissen. Das ist ja nun mal ein 'must have' bei responsiven Seiten. Danke !
Author
Das sind übrigens die Breakpoints:
Hallo Klaus,
Du könntest mit der Viewport-orientierten Schriftgröße arbeiten. Bei einem Text in einem Text-Objekt schreibts Du zunächst unter Eigenschaften der Seite im Reiter Erweitert in den Code "Vor dem </HEAD>-Tag folgendes:
<style>
p {font-size: 4vw};
</style>
Danach musst Du im Text-Objekt den HTML-Code aktivieren
und den Text, der sich anpassen soll in <p>-Tags (also <p> am Anfang und </p> am Ende) einschließen.
Versuche es mal, viel Erfolg
DAs mit den Fontgrößen ist sehr schwer zu bestimmen, weil jeder Abschnitt meistens andere Fontgrößen hat.
Deshalb ist es auch schwierig wenn man es nur Online sieht was geändert werden muss. Da kann man nur direkt im Projekt arbeiten und probieren.
Wahrscheinlich muss man den Text-Objekt Selektor benützen und mit "vw" arbeiten statt mit "%" Werten!
Author
@ Franz-Josef: Vielen Dank für den Tip. Da muss man erst mal drauf kommen :-)
@ Andreas: Vielen Dank für die Information.
Ich habe bereits erste positive Ergebniss erziehlt. Muss aber erkennen, dass es nicht ganz trivial ist, eigenen Code ins X5-Coding zu fuschen, das zufriedenstellend funktioniert.