Schriftgröße an Fensterbreite anpassen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anpassen
beispiel
code
element
fenster
festlegen
http
info
kenntnis
objekt
paar
post
richten
sinn
sinnloser text
teddy
text
url
vorhaben
wissen
-
Hallo,
ich hab leider null Ideen, wie das funktionieren könnte. Möchte gerne eine Dynamische Schriftgröße haben, die sich nach Fenstergröße ändert...
Ein Tutorial oder so würde mir schon reichen :) -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Wozu brauchst du das?
Wonach soll sich das richten? Fensterhöhe? Fensterbreite?
Dabei wird dir auf jeden Fall JavaScript helten. -
hackyourlife schrieb:
Wozu brauchst du das?
Wonach soll sich das richten? Fensterhöhe? Fensterbreite?
Dabei wird dir auf jeden Fall JavaScript helten.
Hast du den Text nur überflogen? ^^
Titel: Schriftgröße an Fensterbreite anpassen
Weitere Ausführung: Möchte gerne eine Dynamische Schriftgröße haben, die sich nach Fenstergröße ändert... -
hackyourlife schrieb:
kill-a-teddy schrieb:
Titel vergisst man sobald man den 1. Post gelesen hat
Titel: Schriftgröße an Fensterbreite anpassen
Noch ein paar mehr Infos:
• window.innerWidth = aktuelle Fensterbreite
• document.getElementById('element').style.fontSize = '7px'; // Schriftgröße eines Elements festlegen
Das hilft leider gar nicht :/ -
Warum? Du fragst die innere Größe des Fensters mit
• window.innerWidth = aktuelle Fensterbreite
ab und setzt dann die Schriftgröße mithilfe von• document.getElementById('element').style.fontSize =
. Wo ist noch das Problem?
Entweder Du benutzt mehrere Möglichkeiten, sodass beispielsweise für Fenster (=window) gilt:
window < 100px -> font=7px;
100px <= window < 250px -> font=9px;
...
Oder Du berechnest mit prozentualen Angaben:
document.getElementById('element').style.fontSize = window.innerWidth*7/100; -
kill-a-teddy schrieb:
Du wolltest nur wissen wie es funktioniert… JavaScript-Kenntnisse hätte ich vorausgesetzt
Das hilft leider gar nicht :/
Dann mal ein Beispiel, wie das gelöst werden kann, egal ob dieses Vorhaben irgend einen Sinn ergibt:<html> <head> <title>dynamic font size</title> <script type="text/javascript">// <![CDATA[ window.onresize = function() { document.getElementsByTagName('body')[0].style.fontSize = (window.innerWidth / 50) + 'px'; }; // ]]></script> </head> <body> <p>Das ist ein sinnloser Text, der eine dynamische Größe bekommt.</p> <script type="text/javascript">// <![CDATA[ window.onresize(); // ]]></script> </body> </html> -
hackyourlife schrieb:
Du wolltest nur wissen wie es funktioniert… JavaScript-Kenntnisse hätte ich vorausgesetzt
Dann mal ein Beispiel, wie das gelöst werden kann, egal ob dieses Vorhaben irgend einen Sinn ergibt:<html> <head> <title>dynamic font size</title> <script type="text/javascript">// <![CDATA[ window.onresize = function() { document.getElementsByTagName('body')[0].style.fontSize = (window.innerWidth / 50) + 'px'; }; // ]]></script> </head> <body> <p>Das ist ein sinnloser Text, der eine dynamische Größe bekommt.</p> <script type="text/javascript">// <![CDATA[ window.onresize(); // ]]></script> </body> </html>
Sorry, dass ich dich jetzt damit nerve ^^ Normal hätte mir das "Wissen" schon gereicht, nur wie gesagt tut sich bei mir gar nix...
Screenshot
Was man hier schlecht sieht, der Text ist direkt unter dem Text "Website under construction" und das ganze ist Localhost...
//EDIT:
Screenshot Vollgröße
//EDIT2:
Es hat jetzt funktioniert, ich musste nur aus dem Stylesheet noch das font-size raus nehmen <.< danke
Beitrag zuletzt geändert: 15.11.2012 13:25:42 von kill-a-teddy -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
