واحدهای اندازه‌گیری در CSS: px، em، rem، vw و vh
در طراحی وب، انتخاب واحدهای اندازه‌گیری مناسب یکی از اساسی‌ترین تصمیمات برای ایجاد طرح‌های واکنش‌گرا و قابل دسترس است. در این مقاله به بررسی پنج واحد پرکاربرد px، em، rem، vw و vh می‌پردازیم.
واحد px (پیکسل)
پیکسل یکی از رایج‌ترین واحدهای اندازه‌گیری در CSS است که مقدار آن ثابت و مستقل از سایر عناصر صفحه است:
- مقدار مطلق و غیرقابل تغییر نسبت به عناصر والد
- مناسب برای عناصری که نیاز به اندازه ثابت دارند (مانند حاشیه‌ها)
- ممکن است در دستگاه‌های مختلف با تراکم پیکسل متفاوت، نمایش یکسانی نداشته باشد
| مثال |
توضیح |
| font-size: 16px; |
اندازه فونت دقیقاً 16 پیکسل |
واحدهای em و rem
این واحدها بر اساس اندازه فونت عنصر والد (em) یا عنصر ریشه (rem) محاسبه می‌شوند:
نکته کلیدی: em واحد نسبی است که به فونت‌سایز والد خود وابسته است، در حالی که rem همیشه به فونت‌سایز عنصر ریشه (html) اشاره دارد.
مثال کاربردی: اگر فونت‌سایز ریشه 16px باشد:
1rem = 16px | 2rem = 32px | 0.5rem = 8px
واحدهای vw و vh
این واحدها بر اساس درصدی از عرض (viewport width) و ارتفاع (viewport height) پنجره مرورگر محاسبه می‌شوند:
- 1vw = 1% از عرض پنجره مرورگر
- 1vh = 1% از ارتفاع پنجره مرورگر
- مناسب برای طرح‌بندی‌های کاملاً واکنش‌گرا
- کاربرد عالی برای عناصری که باید کل صفحه را پر کنند
برای درک عمیق‌تر این مفاهیم، پیشنهاد می‌کنیم مقاله بیشتر بخوانید را مطالعه کنید.
جمع‌بندی نهایی:
- برای اندازه‌های ثابت از px استفاده کنید
- برای طرح‌بندی‌های نسبی و ماژولار از rem بهره ببرید
- برای عناصر وابسته به فونت‌سایز والد از em استفاده نمایید
- برای طرح‌بندی‌های تمام‌صفحه از vw/vh کمک بگیرید
