تولید CSS clamp() رایگان

نحوه کار

این ابزار مقادیر CSS clamp() را با یک فرمول درون‌یابی خطی دست‌نویس محاسبه می‌کند — بدون کتابخانه، بدون رفت‌وبرگشت به سرور. دو اندازه و دو عرض ویوپورت وارد می‌کنید؛ محاسبات فوراً در مرورگر شما اجرا می‌شود و یک عبارت clamp() آماده برای چسباندن با مقدار ترجیحی مبتنی بر vw تولید می‌کند که حروف یا فاصله‌گذاری شما را به‌نرمی بین آن نقاط شکست مقیاس می‌دهد.

1. 1
   محاسبه شیب خطی

   ابزار یک شیب پیکسل-به-پیکسل محاسبه می‌کند: (maxSize - minSize) / (maxViewport - minViewport). این شیب سپس با ضرب در ۱۰۰ به واحدهای vw تبدیل می‌شود، که هسته نحوه کار مقیاس‌گذاری نسبت-به-ویوپورت CSS است.
2. 2
   استخراج تقاطع

   یک آفست تقاطع (به px یا rem) محاسبه می‌شود تا تابع خطی دقیقاً به حداقل اندازه شما در حداقل ویوپورت برسد. با هم، شیب و تقاطع مقدار ترجیحی درون clamp() را می‌سازند — بخشی که واقعاً مقیاس می‌شود.
3. 3
   تبدیل واحد و قالب‌بندی خروجی

   اگر خروجی rem را انتخاب کنید، هر مقدار پیکسل پیش از نوشته‌شدن در رشته clamp() بر اندازه فونت ریشه پیکربندی‌شده شما (پیش‌فرض ۱۶px) تقسیم می‌شود. یک کلاس مقدار-دلخواه Tailwind متناظر نیز تولید می‌شود، با فاصله‌های جایگزین‌شده با زیرخط طبق سینتکس Tailwind.
4. 4
   پیش‌نمایش لغزنده ویوپورت زنده

   یک لغزنده به شما اجازه می‌دهد عرض را از ۳۲۰px تا ۱۹۲۰px تغییر دهید. در هر موقعیت همان فرمول شیب و تقاطع، اندازه محدودشده را در لحظه محاسبه می‌کند و متن نمونه را با آن اندازه پیکسلی نمایش می‌دهد، پس می‌توانید پیش از کپی کردن رفتار مقیاس‌گذاری را ببینید.

ابزارهای مرتبط