kostenloser Webspace werbefrei: lima-city


Schriftgröße an Breite anpassen

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    w3j

    w3j hat kostenlosen Webspace.

    Hi, ich wollte mal fragen ob man (wenn möglich nur mit css) die Schriftgröße an z.B. die Breite eines div Containers anpassen kann. Das man z.B. sagt:
    Schriftgröße(-breite) = Breite-des-div*70%

    Im Internet konnte ich aber nichts dazu finden wie man mit css (wenn nicht möglich mit js) die Schriftbreite einstellt.
    Hoffe ihr habt verstanden was ich meine
    w3j
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

  3. burgi

    Co-Admin Kostenloser Webspace von burgi

    burgi hat kostenlosen Webspace.

    Nach meiner Recherche ist das mit CSS alleine nicht möglich.
    In Verbindung mit JavaScript sollte das allerdings möglich sein, siehe hier:
    http://fittextjs.com/
  4. mein-wunschname

    mein-wunschname hat kostenlosen Webspace.

    Ja, so etwas ähnliches gibt es in der CSS3-Spezifikation. Ich habe hier mal ein kleines, ganz einfaches Beispiel gemacht:
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset='UTF-8'>
    
        <title>Dynamische Anpassung der Schriftgröße</title>
    
        <style>
            h1 {
                font-size: 6.0vw;
            }
            .dynamisch > h2 {
                font-size: 4.0vw;
            }
            .dynamisch > p {
                font-size: 2.0vw;
            }
        </style>
    
    </head>
    
    <body>
    
    
        <div id="wrapper">
    
            <h1>Dynamische Anpassung der Schriftgröße</h1>
    
            <section>
                <div class="dynamisch">
    
                    <h2>Diese Schriftgröße passt sich dynamisch an</h2>
    
                    <p>Diese Schriftgröße passt sich dynamisch an</p>
                    <p>Diese Schriftgröße passt sich dynamisch an</p>
                    <p>Diese Schriftgröße passt sich dynamisch an</p>
                    <p>Diese Schriftgröße passt sich dynamisch an</p>
                    <p>Diese Schriftgröße passt sich dynamisch an</p>
                    <p>Diese Schriftgröße passt sich dynamisch an</p>
                </div>
                <div class="statisch">
                    <h2>Diese Schriftgröße passt sich nicht an</h2>
    
                    <p>Diese Schriftgröße passt sich nicht an.</p>
                    <p>Diese Schriftgröße passt sich nicht an.</p>
                    <p>Diese Schriftgröße passt sich nicht an.</p>
                    <p>Diese Schriftgröße passt sich nicht an.</p>
                    <p>Diese Schriftgröße passt sich nicht an.</p>
                    <p>Diese Schriftgröße passt sich nicht an.</p>
                </div>
    
            </section>
    
    </body>
    
    </html>


    Du siehst, dass ich an Stelle der üblichen Angaben für Schriftgrößen die "komische" Maßeinheit vw verwendet habe. So bedeutet
    font-size: 6.0vw;


    "Stelle die Schriftgröße auf 6% der sichtbaren Breite des Browserfensters" (viewport). Zu beachten ist, dass dieses Feature bei älteren Browsern nicht funktioniert. Ich habe mein Beispiel mit IE11, FF 31 und Chrome 36 getestet - jeweils ok.
    Eine Übersicht zur Browserunterstützung und zu ähnlichen "Größeneinheiten" (vh,vmin,vmax) und nach viele Links findest du auf http://caniuse.com/#feat=viewport-units
  5. Autor dieses Themas

    w3j

    w3j hat kostenlosen Webspace.

    Vielen Dank hatt mir beides sehr weitergeholfen.
    w3j
  6. 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!