واحدهای اندازه‌گیری در CSS به دو دسته کلی تقسیم می‌شوند: مطلق (Absolute) و نسبی (Relative).
- واحدهای مطلق مانند
px،cmوmmدارای مقدار ثابت و غیرقابل تغییر هستند. - واحدهای نسبی مقادیر متغیری دارند و نسبت به اندازه‌ی عناصر والد یا صفحه نمایش تغییر می‌کنند.
واحدهای نسبی در طراحی‌های واکنش‌گرا (Responsive) کاربرد زیادی دارند و به توسعه‌دهندگان اجازه می‌دهند تا المان‌ها را متناسب با اندازه صفحه تنظیم کنند. در این مقاله، با انواع واحدهای نسبی در CSS و کاربرد هر یک آشنا خواهیم شد.
۱. انواع واحدهای نسبی در CSS
| واحد | نسبت به | توضیح |
|---|---|---|
em | فونت والد | ۱ em برابر با اندازه فونت عنصر والد است. |
rem | فونت root | ۱ rem برابر با اندازه فونت عنصر <html> است. |
% | مقدار والد | اندازه‌ی عنصر را بر اساس درصدی از مقدار والد تعیین می‌کند. |
vw | عرض ویوپورت | ۱ vw برابر با ۱٪ از عرض کل صفحه است. |
vh | ارتفاع ویوپورت | ۱ vh برابر با ۱٪ از ارتفاع کل صفحه است. |
vmin | مقدار کوچک‌تر بین vw و vh | ۱ vmin برابر با ۱٪ از کوچک‌ترین مقدار بین vw و vh است. |
vmax | مقدار بزرگ‌تر بین vw و vh | ۱ vmax برابر با ۱٪ از بزرگ‌ترین مقدار بین vw و vh است. |
۲. بررسی دقیق واحدهای نسبی
۱. em – نسبت به اندازه‌ی فونت والد
واحد em اندازه‌ی عنصر را بر اساس اندازه‌ی فونت عنصر والد تعیین می‌کند.
🔹 اگر فونت والد ۱۶px باشد، مقدار ۱em = 16px خواهد بود.
مثال:
.parent {
font-size: 20px;
}
.child {
font-size: 2em; /* 2 * 20px = 40px */
}
✅ در این مثال، اندازه فونت عنصر .child دو برابر اندازه فونت والد (.parent) خواهد شد.
🔹 مزایا: انعطاف‌پذیر و مناسب برای طراحی مقیاس‌پذیر.
🔹 معایب: اندازه‌ی نهایی ممکن است به‌دلیل چندین سطح والدین پیچیده شود.
۲. rem – نسبت به اندازه‌ی فونت ریشه (html)
برخلاف em، واحد rem همیشه نسبت به فونت ریشه‌ی (html) صفحه تنظیم می‌شود.
🔹 اگر html مقدار 16px داشته باشد، ۱rem = 16px خواهد بود.
مثال:
html {
font-size: 16px;
}
.child {
font-size: 2rem; /* 2 * 16px = 32px */
}
✅ در این مثال، اندازه فونت عنصر .child معادل ۳۲ پیکسل خواهد بود.
🔹 مزایا: کنترل آسان‌تر و عدم وابستگی به والدین.
🔹 معایب: نیاز به تعیین مقدار font-size در <html> برای سفارشی‌سازی بهتر.
۳. % – نسبت به مقدار والد
واحد % مقدار عنصر را بر اساس درصدی از مقدار والد تعیین می‌کند.
مثال:
.parent {
width: 500px;
}
.child {
width: 50%; /* 50% از 500px = 250px */
}
✅ در این مثال، عرض عنصر .child برابر با ۵۰٪ عرض .parent یعنی ۲۵۰ پیکسل خواهد شد.
🔹 مزایا: مناسب برای طراحی واکنش‌گرا.
🔹 معایب: ممکن است در برخی سناریوها مقدار نهایی نامشخص و وابسته به والدین باشد.
۴. vw و vh – نسبت به ویوپورت (صفحه نمایش)
vw→ نسبت به عرض کل صفحه (۱vw = ۱٪ عرض صفحه).vh→ نسبت به ارتفاع کل صفحه (۱vh = ۱٪ ارتفاع صفحه).
مثال:
.full-width {
width: 100vw; /* 100% از عرض صفحه */
}
.full-height {
height: 100vh; /* 100% از ارتفاع صفحه */
}
✅ در این مثال، .full-width کل عرض و .full-height کل ارتفاع صفحه را خواهد گرفت.
🔹 مزایا: ایده‌آل برای طراحی‌های تمام‌صفحه (fullscreen).
🔹 معایب: ممکن است در برخی مرورگرها (به‌ویژه در موبایل) مقدار vh دچار مشکل شود.
۵. vmin و vmax – مقایسه عرض و ارتفاع ویوپورت
vmin= ۱٪ مقدار کوچک‌تر بینvwوvhvmax= ۱٪ مقدار بزرگ‌تر بینvwوvh
مثال:
.box {
width: 50vmin; /* 50% از مقدار کوچک‌تر بین عرض و ارتفاع صفحه */
height: 50vmax; /* 50% از مقدار بزرگ‌تر بین عرض و ارتفاع صفحه */
}
✅ اگر عرض صفحه ۱۲۰۰px و ارتفاع ۸۰۰px باشد:
vmin= ۸px،vmax= ۱۲px
🔹 مزایا: مناسب برای المان‌های متناسب با اندازه صفحه.
🔹 معایب: ممکن است در برخی موارد پیش‌بینی مقدار نهایی دشوار باشد.
۳. مقایسه‌ی واحدهای نسبی در CSS
| ویژگی | em | rem | % | vw/vh | vmin/vmax |
|---|---|---|---|---|---|
| وابسته به والد | ✅ بله | ❌ خیر | ✅ بله | ❌ خیر | ❌ خیر |
| مناسب برای فونت | ✅ بله | ✅ بله | ❌ خیر | ❌ خیر | ❌ خیر |
| مناسب برای عرض و ارتفاع | ❌ خیر | ❌ خیر | ✅ بله | ✅ بله | ✅ بله |
| مناسب برای طراحی واکنش‌گرا | ✅ بله | ✅ بله | ✅ بله | ✅ بله | ✅ بله |
✅ rem برای اندازه‌ی متن بهترین گزینه است، زیرا وابسته به html است.
✅ vw و vh برای طراحی‌های فول‌اسکرین ایده‌آل هستند.
✅ % برای تعیین اندازه‌های وابسته به والد بسیار مناسب است.
نتیجه‌گیری
واحدهای نسبی در CSS برای طراحی‌های مقیاس‌پذیر و واکنش‌گرا ضروری هستند.
emوremبرای تنظیم اندازه‌ی متن توصیه می‌شوند.%برای عرض و ارتفاع المان‌ها مناسب است.vw,vh,vmin,vmaxبرای طراحی‌های تمام‌صفحه و داینامیک عالی هستند.
🔹 انتخاب درست واحدها باعث بهبود خوانایی، مقیاس‌پذیری و تجربه کاربری بهتر در تمامی دستگاه‌ها می‌شود.
