फ़्लूइड टाइपोग्राफ़ी क्लैम्प
दो व्यूपोर्ट चौड़ाई के बीच एक रैखिक CSS फ़ॉन्ट स्केल उत्पन्न करें।
आपके मान
CSS क्लैम्प एक्सप्रेशन
जनरेट किया गया CSS एक प्रारंभिक मान है। उपयुक्त होने पर सापेक्ष टेक्स्ट इकाइयों को प्राथमिकता दें और ज़ूम, टेक्स्ट स्केलिंग और ओवरफ़्लो का परीक्षण करें।
परिदृश्य तुलना
इस टैब में अधिकतम तीन स्नैपशॉट। एक को लोड करने से वर्तमान इनपुट बदल जाते हैं।
सूत्र
m = 100(f₁−f₀)/(v₁−v₀) और b = f₀−mv₀/100 का उपयोग करें। फ्लूइड का आकार clamp(f₀, b + m×vw, f₁) है; f फॉन्ट के आकार को दर्शाता है और v व्यूपोर्ट की चौड़ाई को दर्शाता है।
दो व्यूपोर्ट चौड़ाई के बीच एक रैखिक CSS फ़ॉन्ट स्केल उत्पन्न करें।
हल किया गया उदाहरण
- न्यूनतम फ़ॉन्ट आकार (px)
- 16
- अधिकतम फ़ॉन्ट आकार (px)
- 24
- न्यूनतम व्यूपोर्ट चौड़ाई (px)
- 400
- अधिकतम व्यूपोर्ट चौड़ाई (px)
- 1200
- CSS क्लैम्प एक्सप्रेशन
- clamp(16px, calc(12px + 1vw), 24px)
- व्यूपोर्ट गुणांक
- 1 vw
- पिक्सेल इंटरसेप्ट
- 12 px
दायरा और सीमाएँ
जनरेट किया गया CSS एक प्रारंभिक मान है। उपयुक्त होने पर सापेक्ष टेक्स्ट इकाइयों को प्राथमिकता दें और ज़ूम, टेक्स्ट स्केलिंग और ओवरफ़्लो का परीक्षण करें।
इनपुट में अनुपलब्ध मानों और अनुमत सीमाओं की जाँच की जाती है। परिमित संख्यात्मक सीमा से बाहर का परिणाम प्रदर्शित नहीं किया जाता है। राउंडिंग से प्रदर्शन प्रभावित होता है, जबकि गणना मॉडल की संख्यात्मक परिशुद्धता का उपयोग करती है।
किसी परिणाम पर भरोसा करने से पहले अपनी इकाइयों और मान्यताओं की जाँच करें। लेबल बदलने से मुद्रा या भौतिक इकाई परिवर्तित नहीं होती है।
सूत्र संस्करण: 174bffea8b3a · उदाहरण की जाँच की गई: