واحدها (Units)

آشنایی کامل با واحدهای CSS: px، em، rem، %، vw، vh و کاربردهای آن‌ها

واحدهای CSS

انتخاب واحد مناسب، کلید طراحی منعطف و واکنش‌گرا است.

دسته‌های اصلی

دستهواحدهاتوضیح
مطلقpxثابت و غیرقابل تغییر
نسبی به فونتem, remنسبت به اندازه فونت
نسبی به ویوپورتvw, vh, vmin, vmaxنسبت به صفحه نمایش
درصدی%نسبت به والد

۱. px (پیکسل) — مطلق

.box {
        width: 200px;
        font-size: 16px;
        margin: 20px;
    }

۲. em — نسبی به والد

/* em نسبت به فونت والد */
    .parent { font-size: 20px; }
    .child { font-size: 1.5em; } /* ۳۰px = ۲۰ × ۱.۵ */
    .child { padding: 2em; }     /* ۶۰px = ۳۰ × ۲ */

⚠️ مشکل: em تودرتو ترکیبی می‌شود.

۳. rem — نسبی به ریشه ⭐

html { font-size: 16px; }
    
    .box { font-size: 1.5rem; }  /* ۲۴px — همیشه */
    .box { padding: 2rem; }      /* ۳۲px — همیشه */

rem همیشه نسبت به html است — ترکیبی نمی‌شود.

۴. % — درصد از والد

.parent { width: 800px; }
    .child { width: 50%; }  /* ۴۰۰px */

۵. vw و vh — ویوپورت

/* ۱vw = ۱٪ عرض صفحه */
    .hero { width: 100vw; height: 100vh; }
    
    /* ۵۰٪ عرض */
    .half { width: 50vw; }

۶. vmin و vmax

/* vmin = کوچک‌ترین بعد */
    .box { font-size: 3vmin; }
    
    /* vmax = بزرگ‌ترین بعد */
    .box { font-size: 2vmax; }

مقایسه em و rem

ویژگیemrem
مرجعوالدhtml (ریشه)
تودرتوترکیبی ⚠️ثابت ✅
پیش‌بینیسختآسان ⭐

چه واحدی استفاده کنیم؟

کاربردواحد پیشنهادی
فونتrem ⭐
Padding/Marginrem یا em
عرض کانتینر% یا max-width
ارتفاع هیروvh
مدیا کوئریem
خطوط مرزpx

توابع اندازه مدرن

/* min() — کوچک‌ترین */
    font-size: min(5vw, 3rem);
    
    /* max() — بزرگ‌ترین */
    font-size: max(1rem, 2vw);
    
    /* clamp() — محدوده ⭐ */
    font-size: clamp(1rem, 5vw, 3rem);

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

نکات مهم

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

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