تغيير حجم النص الديناميكي

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

jQuery to the Rescue

بينما CSS خالص تقدم خيارات محدودة لتغيير حجم النص، وتوفر JavaScript، وخاصة مكتبة jQuery، حلاً مباشرًا. من خلال الاستفادة من jQuery، يمكنك ضبط حجم النص ديناميكيًا بناءً على ارتفاع النافذة، مما يؤدي إلى إنشاء واجهة سلسة وسريعة الاستجابة.

كيف يعمل

يراقب البرنامج النصي jQuery أحداث تغيير حجم النافذة. عند الاكتشاف، يقوم بحساب النسبة المئوية للتغير في ارتفاع النافذة مقارنة بالارتفاع القياسي المحدد مسبقًا والذي يكون فيه حجم النص هو الأمثل. يتم بعد ذلك تطبيق هذه النسبة على حجم الخط الأساسي، مما يؤدي إلى تعديل تناسبي لحجم الخط.

التنفيذ

قم بدمج كود JavaScript التالي في صفحتك:

$(function() {
    $(window).bind('resize', function()
    {
        resizeMe();
        }).trigger('resize');
    });
function resizeMe() {
//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);
}

السحر وراء البرنامج النصي

• يضبط الارتفاع المفضل ارتفاع النافذة الأساسي الذي يعتبر حجم الخطوط المحدد فيه مناسبًا.
• يتم حساب النسبة المئوية نسبة ارتفاع النافذة الحالية إلى الارتفاع المفضل.
• يقوم newFontSize بضبط حجم الخط الأصلي بناءً على النسبة المئوية، مما يضمن سهولة القراءة عبر أحجام الشاشات المختلفة.

الاستنتاج

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