ماشینحساب CSS clamp()
یک اندازه برای صفحات کوچک و بزرگ وارد کنید و یک مقدار پویا در clamp() دریافت کنید که به طور روان بین آنها مقیاسپذیر است — برای اندازههای فونت، پدینگ، مارجین یا گپ.
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)نتیجه نهایی یک بخش rem در عبارت میانی نگه میدارد تا وقتی کاربر صفحه را تا ۲۰۰٪ بزرگنمایی میکند، متن همچنان بزرگ شود — مقداری که فقط بر اساس viewport باشد این قابلیت را ندارد.
متن پویا، با اندازهای کاملاً متناسب.
محاسبات کاملاً در مرورگر شما انجام میشوند. هیچیک از اطلاعات وارد شده در BroBroGo آپلود نخواهد شد.
سوالات متداول
ماشینحساب چگونه مقدار clamp() را میسازد؟
شما دو نقطه به آن میدهید: یک اندازه در عرض صفحه نمایش کوچک و یک اندازه در عرض صفحه نمایش بزرگ. این ابزار یک خط مستقیم بین این دو نقطه ترسیم میکند تا اندازه با بزرگ شدن صفحه به صورت روان رشد کند، سپس آن را در تابع clamp() قرار میدهد تا هرگز از اندازه صفحه کوچک شما کمتر یا از اندازه صفحه بزرگ شما بیشتر نشود. بین این دو عرض، اندازه به صورت پویا تغییر میکند؛ در خارج از این محدوده، روی نزدیکترین حد ثابت میماند.
چرا نتیجه به جای پیکسل بر اساس rem و vw است؟
محدودهها بر اساس rem هستند و بخش میانی متغیر نیز یک مولفه rem را حفظ میکند تا وقتی خواننده زوم میکند یا اندازه فونت پیشفرض مرورگر خود را تغییر میدهد، متن همچنان بزرگ شود — مقادیر صرفاً پیکسلی یا مبتنی بر viewport میتوانند مانع از کارکرد این قابلیت شوند. شما اندازهها را به پیکسل وارد میکنید چون ملموستر است و ابزار آن را با استفاده از اندازه فونت ریشه (root) به rem تبدیل میکند.
آیا میتوانم از این ابزار برای فاصلهگذاریها استفاده کنم و نه فقط اندازه فونت؟
بله. همین مقدار برای padding، margin، gap، width یا height — هر جایی که نیاز به تعیین طول باشد — کار میکند. پیشنمایش را روی حالت Box قرار دهید تا به جای متن، رشد فاصلهها را مشاهده کنید. اگر اندازههای کوچک و بزرگ شما یکسان باشند، خروجی به یک طول ثابت ساده تبدیل میشود، زیرا چیزی برای مقیاسپذیری وجود ندارد.
آیا همه مرورگرها از clamp() پشتیبانی میکنند؟
بله — تمام مرورگرهای مدرن از سال ۲۰۲۰ از clamp() پشتیبانی میکنند، بنابراین میتوانید بدون نیاز به کد جایگزین (fallback) از آن استفاده کنید. در مقادیر حداکثر بسیار بزرگ یا نرخ تغییرات سریع، بهتر است در بزرگنمایی ۲۰۰٪ بررسی کنید که متن برای خوانندگانی که به آن نیاز دارند همچنان بزرگ شود.