CSS clamp() फ्लुइड टाइपोग्राफी कैलकुलेटर

CSS clamp() फ्लुइड टाइपोग्राफी कैलकुलेटर

फ्लुइड टाइपोग्राफी फ़ॉन्ट साइज़ को मीडिया क्वेरी ब्रेकपॉइंट्स पर अचानक बदलने के बजाय व्यूपोर्ट के साथ सहजता से स्केल करने देती है। CSS का clamp() फंक्शन इसे एक ही लाइन में संभव बनाता है: यह एक न्यूनतम मान, एक पसंदीदा मान (आमतौर पर व्यूपोर्ट-चौड़ाई इकाइयों में), और एक अधिकतम मान लेता है, और ब्राउज़र व्यूपोर्ट के आकार बदलने पर लगातार इनके बीच इंटरपोलेट करता है।

यह कैलकुलेटर क्या करता है

आप देते हैं:

• एक न्यूनतम व्यूपोर्ट चौड़ाई और उस पर (या उससे कम पर) चाहिए फ़ॉन्ट साइज़
• एक अधिकतम व्यूपोर्ट चौड़ाई और उस पर (या उससे अधिक पर) चाहिए फ़ॉन्ट साइज़
• आपका रूट फ़ॉन्ट साइज़ (आमतौर पर 16px, पिक्सेल मानों को rem में बदलने के लिए उपयोग होता है)

कैलकुलेटर उन दो बिंदुओं को जोड़ने वाला रैखिक फलन निकालता है और उसे तैयार clamp() घोषणा के रूप में दिखाता है, साथ ही सामान्य डिवाइस ब्रेकपॉइंट्स पर परिणामी फ़ॉन्ट साइज़ दिखाने वाली एक प्रीव्यू टेबल भी।

सूत्र

न्यूनतम और अधिकतम व्यूपोर्ट चौड़ाई के बीच, फ़ॉन्ट साइज़ व्यूपोर्ट चौड़ाई के साथ रैखिक रूप से स्केल होता है। बदलाव की दर ("स्लोप") है:

$$slope = \frac{maxFontSize - minFontSize}{maxViewport - minViewport}$$

यह स्लोप, प्रतिशत के रूप में व्यक्त, पसंदीदा मान में व्यूपोर्ट-चौड़ाई (vw) गुणांक बन जाता है। रेखा का y-इंटरसेप्ट (rem में) योगात्मक स्थिरांक बन जाता है:

$$preferred(rem) = yIntercept + slope \times 100 \times vw$$

न्यूनतम व्यूपोर्ट से नीचे, मान minFontSize पर क्लैंप हो जाता है। अधिकतम व्यूपोर्ट से ऊपर, यह maxFontSize पर क्लैंप हो जाता है। यही ठीक वही है जो clamp(min, preferred, max) CSS में स्वाभाविक रूप से करता है - किसी मीडिया क्वेरी की आवश्यकता नहीं।

इसका उपयोग कैसे करें

1. अपनी न्यूनतम व्यूपोर्ट चौड़ाई (जैसे छोटे फ़ोन के लिए 320px) और वहाँ चाहिए फ़ॉन्ट साइज़ दर्ज करें।
2. अपनी अधिकतम व्यूपोर्ट चौड़ाई (जैसे सामान्य डेस्कटॉप के लिए 1440px) और वहाँ चाहिए फ़ॉन्ट साइज़ दर्ज करें।
3. यदि आपका रूट फ़ॉन्ट साइज़ डिफ़ॉल्ट 16px नहीं है तो उसे दर्ज करें।
4. जनरेट की गई font-size: clamp(...) घोषणा को सीधे अपने CSS में कॉपी करें।
5. आपके लिए महत्वपूर्ण ब्रेकपॉइंट्स पर साइज़ सही दिखता है या नहीं, यह पुष्टि करने के लिए प्रीव्यू टेबल देखें।

हल किया गया उदाहरण

मान लीजिए आप चाहते हैं कि बॉडी टेक्स्ट 320px चौड़े फ़ोन पर 16px से 1280px चौड़े डेस्कटॉप पर 20px तक स्केल हो, 16px रूट फ़ॉन्ट साइज़ के साथ:

• स्लोप: (20 - 16) / (1280 - 320) = 0.004167 px प्रति px, या 0.4167vw
• Y-इंटरसेप्ट: 16 - 0.004167 × 320 = 14.667px → 0.9167rem
• परिणाम: font-size: clamp(1rem, 0.9167rem + 0.4167vw, 1.25rem);

768px व्यूपोर्ट पर, यह लगभग 17.87px के बराबर होता है - बीच में सहजता से, बिना किसी विशेष ब्रेकपॉइंट पर दिखाई देने वाली "छलांग" के।

मीडिया क्वेरीज़ के बजाय clamp() का उपयोग क्यों करें

• बनाए रखने के लिए कम ब्रेकपॉइंट्स: एक ही घोषणा कई @media नियमों की जगह लेती है।
• कोई दिखाई देने वाली छलांग नहीं: विंडो का आकार बदलने पर टेक्स्ट लगातार आकार बदलता है, जो अचानक बदलाव से अधिक परिष्कृत लगता है।
• डिफ़ॉल्ट रूप से सुलभ: क्योंकि मान वास्तविक rem-आधारित साइज़ पर न्यूनतम और अधिकतम होता है, यह अकेले फिक्स्ड-vw साइज़िंग के विपरीत, उपयोगकर्ता के ब्राउज़र ज़ूम और बेस फ़ॉन्ट साइज़ सेटिंग्स का सम्मान करता रहता है।