پیشنهاد دوره:

توابع CSS clamp()

تعریف و استفاده CSS clamp() این تابع برای تنظیم مقداری استفاده می‌شود که بر اساس اندازه视گاه، بین کمینه و بیشینه به صورت خودکار تنظیم می‌شود.

clamp() این تابع سه پارامتر دارد: کمینه، پیشنهادی و بیشینه. اگر مقدار پیشنهادی در محدوده مشخص شده باشد، مرورگر مقدار پیشنهادی را انتخاب می‌کند؛ در غیر این صورت، مرورگر کمینه یا بیشینه را انتخاب می‌کند.

مثال

حداقل اندازه فونت عناصر <h1> را به 2rem و حداکثر اندازه فونت را به 3.5rem تنظیم کنید. همچنین، حداقل اندازه فونت عناصر <p> را به 1rem و حداکثر اندازه فونت را به 2.5rem تنظیم کنید:

h1 {
  font-size: clamp(2rem, 2.5vw, 3.5rem);
}
p {
  font-size: clamp(1rem, 2.5vw, 2.5rem);
}

آزمایش کنید

قوانین CSS

clamp(min, preferred, max)

جزئیات فنی

پشتیبانی مرورگر

جدول شماره‌ها نسخه مرورگرهایی را نشان می‌دهد که این عملکرد را به طور کامل پشتیبانی می‌کنند.