मोफत CSS clamp() जनरेटर

हे कसे कार्य करते

हे साधन गराज-लिहिलेल्या रेखीय interpolation सूत्राचा वापर करून CSS clamp() मूल्ये मोजते — लायब्ररी, सर्व्हर राउंड-ट्रिप्स नाही. तुम्ही दोन आकार आणि दोन viewport रुंदी टाकता; गणित तात्काळ तुमच्या ब्राउझरमध्ये चालते आणि त्या breakpoints दरम्यान तुमचा प्रकार किंवा spacing गुळगुळीत स्केल करणारे vw-आधारित पसंतीचे मूल्य असलेली पेस्ट-रेडी clamp() अभिव्यक्ती तयार करते.

1. 1
   रेखीय slope गणना

   साधन pixel-per-pixel slope मोजते: (maxSize - minSize) / (maxViewport - minViewport). हा slope नंतर 100 ने गुणून vw एककांत रूपांतरित होतो, जो CSS viewport-relative स्केलिंग कसे कार्य करते याचा गाभा आहे.
2. 2
   Intercept काढणे

   एक intercept ऑफसेट (px किंवा rem मध्ये) मोजला जातो त्यामुळे रेखीय फंक्शन किमान viewport वर तुमच्या किमान आकाराला तंतोतंत गाठतो. एकत्र, slope आणि intercept clamp() आतील पसंतीचे मूल्य बनवतात — जो प्रत्यक्षात स्केल होणारा भाग आहे.
3. 3
   एकक रूपांतर आणि आउटपुट फॉरमॅटिंग

   जर तुम्ही rem आउटपुट निवडले, तर clamp() स्ट्रिंगमध्ये लिहिण्यापूर्वी प्रत्येक pixel मूल्य तुमच्या कॉन्फिगर केलेल्या root फॉन्ट आकाराने (डीफॉल्ट 16px) भागले जाते. Tailwind च्या सिंटॅक्सनुसार जागा underscores ने बदललेला जुळणारा Tailwind arbitrary-value class देखील तयार होतो.
4. 4
   लाइव्ह viewport स्लायडर प्रिव्ह्यू

   एक range स्लायडर तुम्हाला 320px ते 1920px रुंदीपर्यंत scrub करू देतो. प्रत्येक स्थानावर तोच slope-and-intercept सूत्र रिअल टाइममध्ये clamped आकार मोजतो आणि त्या मोजलेल्या pixel आकारावर sample मजकूर रेंडर करतो, त्यामुळे तुम्ही काहीही कॉपी करण्यापूर्वी स्केलिंग वर्तन पाहू शकता.

संबंधित साधने