مفت CSS clamp() جنریٹر
responsive typography اور spacing کے لیے fluid CSS clamp() ویلیو بنائیں۔ کم سے کم/زیادہ سے زیادہ سائز اور viewport رینج ترتیب دیں، لائیو پریویو دیکھیں، اور ایک لائن CSS کاپی کریں۔
مختلف viewports پر رینڈر شدہ سائز
clamp(min, preferred, max) کسی قدر کو viewport کے ساتھ روانی سے بدلتا ہے، پھر کم از کم اور زیادہ سے زیادہ پر مقفل ہو جاتا ہے۔ ٹائپوگرافی، سپیسنگ اور چوڑائیوں کے لیے میڈیا کوئریز کی تہہ کو ایک لائن سے بدلتا ہے۔
عام استعمالات
- Fluid Responsive Typography بنائیںموبائل اور ڈیسک ٹاپ کے درمیان ایک لائن کے ساتھ smoothly font sizes کو scale کریں۔
- Fluid Margins اور PaddingBreakpoints میں jump کرنے کے بجائے viewport کے ساتھ section spacing کو بڑھائیں۔
- Media Queries کو clamp() سے بدلیںBreakpoint overrides کی stacks کو ایک fluid value میں collapse کریں۔
- ایک Fluid Type Scale بنائیںDesign-system type scale کے لیے مطابقت پذیر clamp() steps بنائیں۔
- Fluid Hero اور Display Headingsبڑے landing-page headings کو ڈرامائی طریقے سے لیکن محفوظ طریقے سے scale کریں۔
یہ کیسے کام کرتا ہے
یہ ٹول ہاتھ سے لکھے لکیری interpolation فارمولے سے CSS clamp() قدریں نکالتا ہے — نہ لائبریریاں، نہ سرور کا چکر۔ آپ دو سائز اور دو ویوپورٹ چوڑائیاں درج کرتے ہیں؛ حساب فوراً آپ کے براؤزر میں چلتا ہے اور پیسٹ کے لیے تیار clamp() ایکسپریشن بناتا ہے جس کی vw پر مبنی ترجیحی قدر آپ کے متن یا فاصلے کو ان بریک پوائنٹس کے درمیان ہموار طریقے سے بڑھاتی ہے۔
- 1لکیری ڈھلوان کا حسابٹول پکسل فی پکسل ڈھلوان نکالتا ہے: (maxSize - minSize) / (maxViewport - minViewport)۔ پھر اسے 100 سے ضرب دے کر vw اکائیوں میں بدلا جاتا ہے، جو CSS ویوپورٹ کی نسبت پیمانہ بندی کی بنیاد ہے۔
- 2Intercept کا اخذایک intercept آفسیٹ (px یا rem میں) نکالا جاتا ہے تاکہ لکیری فنکشن کم از کم ویوپورٹ پر بالکل آپ کے کم از کم سائز پر ہو۔ ڈھلوان اور intercept مل کر clamp() کے اندر ترجیحی قدر بناتے ہیں — وہ حصہ جو واقعی بڑھتا گھٹتا ہے۔
- 3اکائی کی تبدیلی اور آؤٹ پٹ فارمیٹنگاگر آپ rem آؤٹ پٹ منتخب کریں تو ہر پکسل قدر clamp() اسٹرنگ میں لکھنے سے پہلے آپ کے مقررہ روٹ فونٹ سائز (ڈیفالٹ 16px) سے تقسیم کی جاتی ہے۔ ایک مماثل Tailwind arbitrary-value کلاس بھی بنتی ہے، جس میں Tailwind نحو کے مطابق اسپیسز کی جگہ انڈرسکور ہوتے ہیں۔
- 4لائیو ویوپورٹ سلائیڈر پیش منظرایک رینج سلائیڈر آپ کو 320px سے 1920px چوڑائی تک گھسیٹنے دیتا ہے۔ ہر مقام پر وہی ڈھلوان اور intercept فارمولا حقیقی وقت میں محدود سائز نکالتا ہے اور اس پکسل سائز پر نمونہ متن دکھاتا ہے، تاکہ کچھ کاپی کرنے سے پہلے آپ پیمانہ بندی کا رویہ دیکھ سکیں۔
متعلقہ ٹولز
CSS گرڈ جنریٹر
CSS گرڈ کو بصری طور پر ڈیزائن کریں — ٹریکس، یونٹ اور gaps — اور تیار شدہ CSS اور HTML کو کاپی کریں۔
میری اسکرین ریزولوشن کیا ہے
اپنی اسکرین ریزولوشن CSS اور حقیقی پکسلز میں دیکھیں، ونڈو کا سائز، پکسل ریشو، رنگوں کی گہرائی، HDR، ٹچ سپورٹ اور ریفریش ریٹ، اور یہ سب کاپی کریں۔
دستخط ساز
ماؤس، انگلی یا اسٹائلس سے دستخط بنائیں، یا ہاتھ کی لکھائی والے فونٹ میں اپنا نام لکھیں، پھر اسے شفاف PNG یا SVG کے طور پر ایکسپورٹ کریں۔