自動調整響應式網頁的文字大小

設計響應式網頁時，請確保包括文字在內的所有元素都能無縫調整以適應不同的需求視窗大小對於最佳使用者體驗至關重要。本指南將示範如何使用 CSS 和 jQuery 的組合來實現自動調整文字大小。

首先，使用 CSS 設定 body 元素的基本字體大小。例如：

body {
    font-size: 18px;
}

接下來，使用百分比來定義其他元素相對於正文字體大小的字體大小。例如：

h1 {
    font-size: 150%;
}
p {
    font-size: 120%;
}

要處理視窗大小調整，請使用 jQuery 腳本。下面的程式碼將動態調整基本字體大小：

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

function resizeMe() {
    // Calculate the new body font size based on the window height
    var standardHeight = 768; // Standard height for which body font size is defined
    var baseFontSize = 18;
    var windowHeight = $(window).height();
    var percentage = windowHeight / standardHeight;
    var newBodyFontSize = Math.floor(baseFontSize * percentage) - 1;

    // Set the new font size for the body element
    $("body").css("font-size", newBodyFontSize);
}

當調整視窗大小時，此腳本將調整基本字體大小，從而調整所有其他字體大小。因此，文字將在視窗大小變化時平滑縮放，為使用者在不同裝​​置和螢幕解析度下提供一致、舒適的閱讀體驗。