Wie kann ich eine dynamische Textskalierung basierend auf der Browserbreite erreichen?

Dynamische Textskalierung mit Browserbreite

Eine dynamische Textskalierung basierend auf der Browserbreite ist tatsächlich möglich. So geht's:

Legen Sie die Schriftgröße Ihres Dokuments beim Ändern der Fenstergröße mithilfe von JavaScript fest. Dies kann mit dem folgenden jQuery-Code erreicht werden:

<code class="javascript">$( document ).ready( function() {
    var $body = $('body'); // Cache this for better performance

    var setBodyScale = function() {
        var scaleSource = $body.width(),
            scaleFactor = 0.35,                     
            maxScale = 600,
            minScale = 30; // Adjust these values to your preference.

        var fontSize = scaleSource * scaleFactor; // Multiply the body width by the scale factor.

        if (fontSize > maxScale) fontSize = maxScale;
        if (fontSize < minScale) fontSize = minScale; // Enforce minimum and maximums.

        $('body').css('font-size', fontSize + '%');
    }

    $(window).resize(function(){
        setBodyScale();
    });

    // Initializing when the page first loads.
    setBodyScale();
});</code>

Indem Sie die Schriftgröße des Body-Elements in Prozent festlegen, erzeugen Sie einen „universellen Textzoom“-Effekt, der jeden in ems eingestellten Text skaliert. Bei Bedarf können Sie auch auf bestimmte Elemente abzielen, indem Sie die prozentuale Schriftgröße für ein umschließendes Div festlegen.

Eine kurze Demonstration finden Sie in diesem Beispiel: https://www.spookandpuff.com/examples/dynamicTextSize. html

Das obige ist der detaillierte Inhalt vonWie kann ich eine dynamische Textskalierung basierend auf der Browserbreite erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!