تغيير حجم النص تلقائيًا لصفحات الويب سريعة الاستجابة

عند تصميم صفحات ويب سريعة الاستجابة، تأكد من أن جميع العناصر، بما في ذلك النص، تتكيف بسلاسة مع الاختلافات تعد أحجام النوافذ أمرًا بالغ الأهمية لتجربة المستخدم المثالية. سيوضح هذا الدليل كيفية تحقيق تغيير حجم النص تلقائيًا باستخدام مزيج من CSS وjQuery.

للبدء، قم بتعيين حجم الخط الأساسي لعنصر النص باستخدام CSS. على سبيل المثال:

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);
}

سيعمل هذا البرنامج النصي على ضبط حجم الخط الأساسي، وبالتالي جميع أحجام الخطوط الأخرى، عند تغيير حجم النافذة. ونتيجة لذلك، سيتم تغيير حجم النص بسلاسة أثناء تغيير حجم النافذة، مما يوفر للمستخدمين تجربة قراءة متسقة ومريحة عبر الأجهزة المختلفة ودرجات دقة الشاشة.