it-swarm.com.de

text (Schriftgröße) beim Ändern der Fenstergröße automatisch anpassen?

Ich habe (vergeblich) versucht, eine Seite zu erstellen, deren Elemente ihre Größe ändern würden, wenn ich die Fenstergröße ändere. Ich habe es in CSS für Bilder gearbeitet, kein Problem, aber ich scheine nicht dasselbe für Text zu erreichen, und ich bin mir nicht sicher, ob das überhaupt in CSS möglich ist. Und ich scheine kein Jquery-Skript zu finden, das dies bewerkstelligt.

Wenn ein Benutzer das Fenster ändert, möchte ich im Wesentlichen, dass die Seite dynamisch und flüssig skaliert wird, ohne dass der Benutzer den Seitenzoom aufrufen muss. Dies funktioniert gut mit meinen img divs via css, aber nicht für den Text, der die gleiche Größe hat.

Irgendwelche Ideen?

14
Stephen

Ich musste das selbst machen. Was ich getan habe, war, dass ich eine Grundtextgröße für den Körper und Prozentsätze für alle anderen Größen festgelegt habe. Ich habe dann ein einfaches jQuery-Skript verwendet, um die Basisgröße für die Fenstergröße zu ändern. Die anderen Größen werden dann ebenfalls aktualisiert. 

Ich habe so etwas verwendet:

$(function() {
    $(window).bind('resize', function()
    {
        resizeMe();
        }).trigger('resize');
    });

und in der resizeMe-Funktion hatte ich folgendes:

//Standard height, for which the body font size is correct
var preferredHeight = 768;
//Base font size for the page
var fontsize = 18;

var displayHeight = $(window).height();
var percentage = displayHeight / preferredHeight;
var newFontSize = Math.floor(fontsize * percentage) - 1;
$("body").css("font-size", newFontSize);
34
Lizzan

Versuchen Sie es mit einem jQuery-Plugin wie FitText . Der Text wird automatisch an die Breite des übergeordneten Elements angepasst.

Ein weiteres jQuery-Plugin mit demselben Ziel ist BigText ( demo ).

12
Ryan McGeary

Dies ist mit CSS3-Medienabfragen möglich, wobei je nach Browsergröße unterschiedliche Schriftgradgrößen festgelegt werden. Es gibt einen guten Artikel dazu auf A List Apart

Für die Unterstützung von IE können Sie es möglicherweise mit CSS-Ausdrücken hacken

Dies erfordert, dass Sie eine feste Basisschriftgröße verwenden, z. B. für das Tag body, und für anteilige oder em-basierte Größen an anderer Stelle.

7
roryf

Aufbauend auf Lizzans Antwort, hier eine Version, die die Quadratwurzel von width und height verwendet, um eine proportionale Größe zu erhalten:

// When document has finished loading
$(document).ready(function() {

    var resizeText = function () {
        // Standard height, for which the body font size is correct
        var preferredFontSize = 180; // %
        var preferredSize = 1024 * 768;

        var currentSize = $(window).width() * $(window).height();
        var scalePercentage = Math.sqrt(currentSize) / Math.sqrt(preferredSize);
        var newFontSize = preferredFontSize * scalePercentage;
        $("body").css("font-size", newFontSize + '%');
    };

    $(window).bind('resize', function() {
        resizeText();
    }).trigger('resize');

});

Demo: http://jsfiddle.net/tomsoderlund/26Gad/embedded/result/

4
Tom Söderlund

roryf ist auf dem richtigen Weg!

Medienabfragen sind (eine der Antworten).

Der Trick hier ist,% für Schriftgrößen überall zu verwenden, angefangen vom Hauptteil. Auf diese Weise wird die Schriftgröße vererbt und wenn Sie sie im Text ändern, wird sie überall geändert.

Versuchen Sie etwas wie: 

body { font-size: 100% }
h1 {font-size: 200% }

@media all and (max-width:600px) {
    body {font-size: 70%}
}

Wenn die Breite der Website unter 600px fällt, wird die Schriftgröße zu 70% von dem, was sie überall war, wo% verwendet wird (in diesem Beispiel auch h1).

3
Martin Sookael

Ich benutze den Trick von http://practicaltypography.com/end-credits.html#bio M. Butterick:

    <style type="text/css">
<!--adattamento font-size a browser width-->
        @media all {html {font-size: 24px;}}@media all and (max-width:2200px){html {font-size: 27px;}}@media all and (max-width:1800px){html {font-size: 26px;}}@media all and (max-width:1400px){html {font-size: 25px;}}@media all and (max-width:1000px){html {font-size: 24px;}}@media all and (max-width:960px){html {font-size: 23px;}}@media all and (max-width:920px){html {font-size: 22px;}}@media all and (max-width:880px){html {font-size: 21px;}}@media all and (max-width:840px){html {font-size: 20px;}}@media all and (max-width:800px){html {font-size: 19px;}}@media all and (max-width:760px){html {font-size: 18px;}}@media all and (max-width:720px){html {font-size: 17px;}}@media all and (max-width:680px){html {font-size: 16px;}}@media all and (max-width:640px){html {font-size: 15px;}}@media all and (max-width:600px){html {font-size: 14px;}}@media all and (max-width:560px){html {font-size: 13px;}}@media all and (max-width:520px){html {font-size: 12px;}}
<!--body-format-->
            body {
        max-width:1000px;
        min-width:520px;
        line-height:1.33em;
        margin:1em;
        background-color:#f7f7f7;
        font-family:Source Sans Pro;
        color:#361800;
        }
    </style>
3
Peter Forster

Sie können den Text in seiner Größe ändern. Diese Lösung funktioniert für mich . http://jsfiddle.net/VooDi/dka48dx8/

Bei Schriftgröße für Schriftgröße entspricht dies der aktuellen Fensterinnenbreite.

für jsfiddle 560 px;

body {
    font-size: 560px; 
}

js:

onresize=onload=function() {
    document.body.style.fontSize=window.innerWidth+"px"
}

und für die benötigte Schriftgröße des Elementsatzes in Prozent

<h1 style="font-size:5%">Resize this text!!!!</h1>

Das ist alles. Hoffe das hilft jemandem.

0
G.F.

Lizzans Antwort ist perfekt! Lass das -1 wo es ist! Kätzchen starben überall, als ich es entfernte.

Setzen Sie statt der Schriftgrößenvariablen einfach die Standardschriftgröße für Ihre Seite. Meins war 16.