kostenloser Webspace werbefrei: lima-city


Schriftgröße an Fensterbreite anpassen

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    kill-a-teddy

    Kostenloser Webspace von kill-a-teddy

    kill-a-teddy hat kostenlosen Webspace.

    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 :)
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    Wozu brauchst du das?

    Wonach soll sich das richten? Fensterhöhe? Fensterbreite?

    Dabei wird dir auf jeden Fall JavaScript helten.
  4. Autor dieses Themas

    kill-a-teddy

    Kostenloser Webspace von kill-a-teddy

    kill-a-teddy hat kostenlosen Webspace.

    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...
  5. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    kill-a-teddy schrieb:
    Titel: Schriftgröße an Fensterbreite anpassen
    Titel vergisst man sobald man den 1. Post gelesen hat ;-)

    Noch ein paar mehr Infos:
    window.innerWidth = aktuelle Fensterbreite
    • document.getElementById('element').style.fontSize = '7px'; // Schriftgröße eines Elements festlegen
  6. Autor dieses Themas

    kill-a-teddy

    Kostenloser Webspace von kill-a-teddy

    kill-a-teddy hat kostenlosen Webspace.

    hackyourlife schrieb:
    kill-a-teddy schrieb:
    Titel: Schriftgröße an Fensterbreite anpassen
    Titel vergisst man sobald man den 1. Post gelesen hat ;-)

    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 :/
  7. 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;
  8. hackyourlife

    Moderator Kostenloser Webspace von hackyourlife

    hackyourlife hat kostenlosen Webspace.

    kill-a-teddy schrieb:
    Das hilft leider gar nicht :/
    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&ouml;&szlig;e bekommt.</p>
    		<script type="text/javascript">// <![CDATA[
    			window.onresize();
    		// ]]></script>
    	</body>
    </html>
  9. Autor dieses Themas

    kill-a-teddy

    Kostenloser Webspace von kill-a-teddy

    kill-a-teddy hat kostenlosen Webspace.

    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&ouml;&szlig;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
  10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!