توابع ریاضی (Math Functions)

آشنایی با calc()، min()، max() و clamp() در CSS برای محاسبات پویا

توابع ریاضی CSS

CSS توابع قدرتمندی برای محاسبات ریاضی ارائه می‌دهد که طراحی پویا را ممکن می‌سازند.

چهار تابع اصلی

تابعتوضیحمثال
calc()محاسبهcalc(100% - 50px)
min()کوچک‌ترینmin(50%, 300px)
max()بزرگ‌ترینmax(1rem, 2vw)
clamp()محدوده ⭐clamp(1rem, 5vw, 3rem)

۱. calc() — محاسبه

.sidebar {
        width: calc(100% - 250px);  /* عرض کامل منهای سایدبار */
    }
    
    .hero {
        height: calc(100vh - 60px);  /* ارتفاع منهای هدر */
    }
    
    /* ترکیب واحدها */
    .font {
        font-size: calc(1rem + 2vw);  /* rem + vw */
    }

⚠️ نکته: اطراف + و - فاصله لازم است.

۲. min() — کوچک‌ترین مقدار

.box {
        width: min(100%, 600px);
        /* در موبایل ۱۰۰٪، در دسکتاپ ۶۰۰px */
    }

۳. max() — بزرگ‌ترین مقدار

.text {
        font-size: max(16px, 2vw);
        /* حداقل ۱۶px، در صفحه بزرگ بیشتر */

۴. clamp() — محدوده ⭐

h1 {
        font-size: clamp(1.5rem, 5vw, 3rem);
        /* حداقل ۱.۵rem، ایده‌آل ۵vw، حداکثر ۳rem */
    }

clamp() بهترین تابع برای تایپوگرافی ریسپانسیو است.

کاربردهای عملی

/* تایپوگرافی ریسپانسیو */
    h1 { font-size: clamp(1.5rem, 5vw, 3rem); }
    h2 { font-size: clamp(1.25rem, 4vw, 2rem); }
    p  { font-size: clamp(1rem, 2.5vw, 1.125rem); }
    
    /* کانتینر ریسپانسیو */
    .container {
        width: min(90%, 1200px);
        margin: 0 auto;
    }
    
    /* ارتفاع منهای هدر */
    .main {
        min-height: calc(100vh - 60px);
    }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

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