इस टूल के बारे में
पारंपरिक रिस्पॉन्सिव टाइपोग्राफी हर मीडिया-क्वेरी ब्रेकपॉइंट पर स्थिर आकारों के बीच अचानक बदलती है — मोबाइल पर 16px, फिर किसी चौड़ाई के बाद अचानक 20px। CSS का `clamp(न्यूनतम, पसंदीदा, अधिकतम)` इस उछाल को निरंतर स्केलिंग से बदल देता है: फ़ॉन्ट आकार आपके चुने हुए न्यूनतम और अधिकतम के बीच व्यूपोर्ट के साथ सहजता से बढ़ता है। न्यूनतम व्यूपोर्ट चौड़ाई से नीचे यह न्यूनतम आकार पर स्थिर रहता है; अधिकतम से ऊपर यह अधिकतम आकार पर स्थिर रहता है। बीच में ही यह लचीला होता है।
यह कैलकुलेटर आपके लिए इंटरपोलेशन गणित करता है: यह आपके चुने हुए व्यूपोर्ट रेंज पर न्यूनतम और अधिकतम फ़ॉन्ट आकार के बीच रैखिक ढलान निकालता है, इसे `vw`-आधारित पसंदीदा मान के रूप में व्यक्त करता है, और सब कुछ एक तैयार `clamp()` स्ट्रिंग में लपेट देता है। परिणाम को सीधे `font-size` (या किसी भी संख्यात्मक प्रॉपर्टी) में पेस्ट करें — टाइप स्केल के लिए अलग-अलग ब्रेकपॉइंट ओवरराइड की अब ज़रूरत नहीं।
अक्सर पूछे जाने वाले प्रश्न
सिर्फ मीडिया क्वेरी के बजाय clamp() का उपयोग क्यों करें?
मीडिया क्वेरी ब्रेकपॉइंट्स पर निश्चित आकारों के बीच कूदती हैं, जबकि clamp() व्यूपोर्ट के आकार बदलने पर आपके न्यूनतम और अधिकतम के बीच सुचारू और निरंतर रूप से स्केल होता है — किसी भी चौड़ाई पर कोई दृश्यमान "जंप" नहीं।
क्या clamp() सभी ब्राउज़र में काम करता है?
हाँ — CSS clamp() 2020 से सभी प्रमुख ब्राउज़रों (Chrome, Firefox, Safari, Edge) में समर्थित है, इसलिए आज लगभग सभी दर्शकों के लिए बिना फ़ॉलबैक के प्रोडक्शन में इसका उपयोग करना सुरक्षित है।