首頁 > web前端 > css教學 > 如何實現基於瀏覽器寬度的動態文字縮放?

如何實現基於瀏覽器寬度的動態文字縮放?

Patricia Arquette
發布: 2024-10-31 13:50:02
原創
740 人瀏覽過

How Can I Achieve Dynamic Text Scaling Based on Browser Width?

隨瀏覽器寬度動態縮放文字

實作基於瀏覽器寬度的動態文字縮放確實是可能的。操作方法如下:

在調整視窗大小時使用 JavaScript 設定文件的正文字體大小。這可以使用以下 jQuery 程式碼來實現:

<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>
登入後複製

透過以百分比設定 body 元素的字體大小,您可以建立「通用文字縮放」效果,縮放以 em 為單位設定的任何文字。如果需要,您也可以透過在封閉的 div 上設定百分比字體大小來定位特定元素。

有關快速演示,請訪問此範例:https://www.spookandpuff.com/examples/dynamicTextSize。 html

以上是如何實現基於瀏覽器寬度的動態文字縮放?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板