रिस्पॉन्सिव वेब पेजों के लिए टेक्स्ट का ऑटो-आकार बदलना

रिस्पॉन्सिव वेब पेज डिजाइन करते समय, यह सुनिश्चित करना कि टेक्स्ट सहित सभी तत्व अलग-अलग तरीके से समायोजित हो जाएं इष्टतम उपयोगकर्ता अनुभव के लिए विंडो का आकार महत्वपूर्ण है। यह मार्गदर्शिका प्रदर्शित करेगी कि 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);
}

विंडो का आकार बदलने पर यह स्क्रिप्ट मूल फ़ॉन्ट आकार और परिणामस्वरूप, अन्य सभी फ़ॉन्ट आकार समायोजित करेगी। परिणामस्वरूप, विंडो के आकार में बदलाव के दौरान टेक्स्ट आसानी से स्केल हो जाएगा, जिससे उपयोगकर्ताओं को विभिन्न डिवाइस और स्क्रीन रिज़ॉल्यूशन पर लगातार और आरामदायक पढ़ने का अनुभव मिलेगा।