निःशुल्क CSS clamp() जेनेरेटर
responsive typography र spacing का लागि fluid CSS clamp() मान उत्पन्न गर्नुहोस्। min/max साइज र viewport दायरा सेट गर्नुहोस्, लाइभ प्रिभ्यू हेर्नुहोस्, र एक-लाइन CSS कपी गर्नुहोस्।
विभिन्न viewport-हरूमा रेन्डर आकार
clamp(min, preferred, max) ले मानलाई viewport सँगसँगै तरल रूपमा स्केल गर्छ, त्यसपछि min र max मा लक गर्छ। यसले टाइपोग्राफी, स्पेसिङ, र चौडाइका लागि मिडिया क्वेरीको ढेरलाई एकै लाइनमा बदल्छ।
सामान्य प्रयोगहरू
- तरल प्रतिक्रियाशील टाइपोग्राफी बनाउनुहोस्मोबाइल र डेस्कटप बीचमा फन्ट साइज एक लाइनसँग चिकनी रूपमा स्केल गर्नुहोस्।
- तरल मार्जिन र प्यादिङपोर्टभ्यु बढ्दै गएको समयमा विभाग स्पेसिङ बढ्नुहोस् बरु ब्रेकपोइन्टहरूमा जम्प गर्न।
- clamp() सँग मिडिया क्वेरीहरू प्रतिस्थापन गर्नुहोस्ब्रेकपोइन्ट अधिरोध को स्ट्याक एक तरल मान मा संक्षिप्त गर्नुहोस्।
- तरल प्रकार स्केल बिल्ड गर्नुहोस्डिजाइन-सिस्टम प्रकार स्केलको लागि सुसंगत clamp() चरणहरू उत्पन्न गर्नुहोस्।
- तरल नायक र प्रदर्शन शीर्षकहरूठूलो ल्यान्डिङ-पृष्ठ शीर्षकहरूलाई नाटकीय रूपमा स्केल गरिराख् तर सुरक्षित।
यो कसरी काम गर्छ
यो उपकरणले हातले लेखिएको लिनियर इन्टरपोलेसन सूत्र प्रयोग गरी CSS clamp() मान गणना गर्छ — कुनै लाइब्रेरी छैन, कुनै सर्भर राउन्ड-ट्रिप छैन। तपाईं दुई साइज र दुई भ्युपोर्ट चौडाइ प्रविष्ट गर्नुहुन्छ; गणित तपाईंको ब्राउजरमा तुरुन्तै चल्छ र तपाईंको प्रकार वा स्पेसिङलाई ती ब्रेकप्वाइन्टहरूबीच सहज रूपमा स्केल गर्ने vw-आधारित मनपर्ने मानसहित प्रतिलिपि-तयार clamp() एक्सप्रेसन उत्पादन गर्छ।
- 1लिनियर स्लोप गणनाउपकरणले पिक्सेल-प्रति-पिक्सेल स्लोप गणना गर्छ: (maxSize - minSize) / (maxViewport - minViewport)। यो स्लोप त्यसपछि 100 ले गुणा गरेर vw एकाइमा रूपान्तरण गरिन्छ, जुन CSS भ्युपोर्ट-सापेक्षिक स्केलिङ कसरी काम गर्छ भन्नेको मूल हो।
- 2इन्टरसेप्ट निकालाइएउटा इन्टरसेप्ट अफसेट (px वा rem मा) गणना गरिन्छ ताकि लिनियर फङ्सनले न्यूनतम भ्युपोर्टमा ठ्याक्कै तपाईंको न्यूनतम साइज छोस्। सँगै, स्लोप र इन्टरसेप्टले clamp() भित्रको मनपर्ने मान बनाउँछन् — स्केल हुने भाग।
- 3एकाइ रूपान्तरण र आउटपुट फर्म्याटिङयदि तपाईंले rem आउटपुट छान्नुहुन्छ भने, clamp() स्ट्रिङमा लेखिनुअघि हरेक पिक्सेल मानलाई तपाईंको कन्फिगर गरिएको रुट फन्ट साइज (पूर्वनिर्धारित 16px) ले भाग गरिन्छ। Tailwind को सिन्ट्याक्स नियमअनुसार स्पेसहरू अन्डरस्कोरले प्रतिस्थापित गरिएर मेल खाने Tailwind arbitrary-value क्लास पनि उत्पादन गरिन्छ।
- 4प्रत्यक्ष भ्युपोर्ट स्लाइडर पूर्वावलोकनएउटा रेन्ज स्लाइडरले तपाईंलाई 320px देखि 1920px चौडाइसम्म स्क्रब गर्न दिन्छ। हरेक स्थितिमा उही स्लोप-र-इन्टरसेप्ट सूत्रले वास्तविक समयमा क्ल्याम्प गरिएको साइज मूल्याङ्कन गर्छ र त्यो गणना गरिएको पिक्सेल साइजमा नमूना पाठ रेन्डर गर्छ, त्यसैले तपाईं केही प्रतिलिपि गर्नुअघि स्केलिङ व्यवहार देख्न सक्नुहुन्छ।
सम्बन्धित उपकरणहरू
CSS ग्रिड जनरेटर
CSS ग्रिड दृश्यमान रूपमा डिजाइन गर्नुहोस् — ट्र्याकहरू, एकाइहरू र अंतरहरू — र उत्पन्न CSS र HTML प्रतिलिपि गर्नुहोस्।
मेरो स्क्रिन रिजोल्युसन के हो
CSS र वास्तविक पिक्सेलहरूमा तपाईंको स्क्रिन रिजोल्युसन, सञ्झ्याल आकार, पिक्सेल अनुपात, रङ गहिराइ, HDR, टच समर्थन र रिफ्रेस दर हेर्नुहोस्, र यो सबै प्रतिलिपि गर्नुहोस्।
हस्ताक्षर निर्माता
आफ्नो माउस, औंला, वा स्टाइलसले हस्ताक्षर कोर्नुहोस्, वा ह्यान्डराइटिङ फन्टमा आफ्नो नाम टाइप गर्नुहोस्, त्यसपछि यसलाई पारदर्शी PNG वा SVG को रूपमा निर्यात गर्नुहोस्।