در CSS، واحدهای اندازه‌گیری برای تعیین اندازه متن، فاصله‌ها، عرض، ارتفاع و سایر ویژگی‌های مرتبط با اندازه‌دهی استفاده می‌شوند.

این واحدها به دو دسته‌ی کلی واحدهای مطلق و واحدهای نسبی تقسیم می‌شوند. انتخاب درست واحدها تأثیر زیادی در طراحی واکنش‌گرا (Responsive Design) و نمایش صحیح سایت در دستگاه‌های مختلف دارد. در این راهنما به بررسی کامل انواع واحدهای اندازه‌گیری در CSS می‌پردازیم.

۱. واحدهای مطلق (Absolute Units)

واحدهای مطلق دارای اندازه‌ی ثابت و غیرقابل تغییر هستند و تحت تأثیر اندازه‌ی والد یا تنظیمات مرورگر قرار نمی‌گیرند. این واحدها برای طراحی‌هایی که نیازی به تغییر اندازه در دستگاه‌های مختلف ندارند، مناسب هستند.

مهم‌ترین واحدهای مطلق در CSS:

مثال استفاده از px و cm در CSS:

h1 {
    font-size: 24px;
}

p {
    width: 10cm;
}

✅ پیکسل (px) رایج‌ترین واحد در طراحی وب است، زیرا دقت بالایی دارد و در نمایشگرهای مختلف یکسان عمل می‌کند.

۲. واحدهای نسبی (Relative Units)

این واحدها نسبت به اندازه‌ی عناصر والد یا اندازه‌ی صفحه تغییر می‌کنند و در طراحی واکنش‌گرا (Responsive Design) بسیار کاربردی هستند.

مهم‌ترین واحدهای نسبی در CSS:

۳. بررسی em و rem

• em: وابسته به اندازه‌ی فونت عنصر والد است.
• rem: وابسته به اندازه‌ی فونت ریشه‌ی صفحه (html) است.

مثال تفاوت em و rem:

html {
    font-size: 16px;
}

.parent {
    font-size: 20px;
}

.child-em {
    font-size: 2em; /* 2 * 20px = 40px */
}

.child-rem {
    font-size: 2rem; /* 2 * 16px = 32px */
}

✅ استفاده از rem در پروژه‌های بزرگ توصیه می‌شود، زیرا باعث یکپارچگی طراحی و مقیاس‌پذیری بهتر می‌شود.

۴. بررسی vw و vh

• vw بر اساس عرض صفحه محاسبه می‌شود.
• vh بر اساس ارتفاع صفحه محاسبه می‌شود.

مثال استفاده از vw و vh:

.full-screen {
    width: 100vw;  /* 100% عرض صفحه */
    height: 100vh; /* 100% ارتفاع صفحه */
}

✅ این واحدها در طراحی‌های فول‌اسکرین و واکنش‌گرا بسیار مفید هستند.

۵. بررسی vmin و vmax

• vmin مقدار کوچک‌تر بین vw و vh را می‌گیرد.
• vmax مقدار بزرگ‌تر بین vw و vh را می‌گیرد.

مثال:

.box {
    width: 50vmin; /* نصف مقدار کوچک‌تر بین عرض و ارتفاع */
    height: 50vmax; /* نصف مقدار بزرگ‌تر بین عرض و ارتفاع */
}

✅ vmin و vmax برای طراحی‌هایی که باید در تمامی دستگاه‌ها متناسب باشند، مفید هستند.

۶. مقایسه و انتخاب بهترین واحد

✅ پیشنهاد کلی: برای طراحی مدرن و واکنش‌گرا، ترکیبی از rem, em, vw, vh و % بهترین انتخاب است.

نتیجه‌گیری

انتخاب درست واحدهای اندازه‌گیری در CSS به شما کمک می‌کند تا طراحی بهینه، مقیاس‌پذیر و واکنش‌گرا داشته باشید.

• از px برای اندازه‌های دقیق و ثابت استفاده کنید.
• از rem و em برای اندازه‌دهی متن و مقیاس‌پذیری بهتر بهره ببرید.
• از vw, vh, vmin, vmax برای طراحی‌های فول‌اسکرین و واکنش‌گرا استفاده کنید.

🔹 انتخاب درست واحدها باعث بهبود خوانایی، زیبایی و عملکرد سایت در تمامی دستگاه‌ها می‌شود.