واحد های اندازه‌گیری در CSS به دو دسته‌ی مطلق (Absolute) و نسبی (Relative) تقسیم می‌شوند.
واحدهای مطلق اندازه‌ی ثابتی دارند و بدون توجه به اندازه‌ی صفحه یا عنصر والد، همیشه مقدار مشخصی را نمایش می‌دهند. این واحدها معمولاً برای چاپ، طراحی‌های دقیق و المان‌هایی که نیازی به تغییر اندازه ندارند، استفاده می‌شوند.
۱. معرفی انواع واحد های مطلق در CSS
واحدهای مطلق در CSS شامل موارد زیر هستند:
| واحد | نام | توضیح |
|---|---|---|
px | پیکسل (Pixel) | رایج‌ترین واحد برای طراحی صفحات وب |
pt | پوینت (Point) | هر ۱ پوینت برابر با ۱/۷۲ اینچ است (مناسب برای چاپ) |
pc | پیکا (Pica) | هر ۱ پیکا برابر با ۱۲ پوینت است |
cm | سانتی‌متر (Centimeter) | اندازه‌گیری بر اساس سانتی‌متر (کمتر استفاده می‌شود) |
mm | میلی‌متر (Millimeter) | اندازه‌گیری بر اساس میلی‌متر (کمتر استفاده می‌شود) |
in | اینچ (Inch) | هر اینچ برابر با ۲.۵۴ سانتی‌متر است |
۲. بررسی کاربرد هر واحد مطلق
۱. پیکسل (px) – پرکاربردترین واحد در طراحی وب
واحد پیکسل رایج‌ترین و استانداردترین واحد در CSS است که در اکثر طراحی‌های وب استفاده می‌شود.
- هر پیکسل معادل یک نقطه‌ی فیزیکی در نمایشگر است.
- در صفحه‌نمایش‌های رتینا (Retina Displays)، تعداد پیکسل‌ها بیشتر و ریزتر است، اما CSS همچنان اندازه‌ی یکسانی را حفظ می‌کند.
- مناسب برای طراحی المان‌هایی که در دستگاه‌های مختلف نمایش یکسانی داشته باشند.
مثال:
p {
font-size: 16px;
}
✅ در این مثال، اندازه‌ی فونت ۱۶ پیکسل تعیین شده و در تمام مرورگرها یکسان نمایش داده می‌شود.
۲. پوینت (pt) – مناسب برای چاپ
هر پوینت (pt) برابر با ۱/۷۲ اینچ است و بیشتر در طراحی اسناد چاپی کاربرد دارد. در وب، این واحد کمتر استفاده می‌شود.
مثال:
p {
font-size: 12pt;
}
✅ این مقدار برای چاپ متون در اندازه‌ی استاندارد مناسب است، اما در وب توصیه نمی‌شود.
۳. پیکا (pc) – واحد کمتر استفاده‌شده
هر ۱ پیکا (pc) برابر با ۱۲ پوینت (pt) است. این واحد بیشتر در صنعت چاپ کاربرد دارد و در طراحی وب استفاده‌ی چندانی ندارد.
مثال:
h1 {
font-size: 2pc; /* معادل 24pt */
}
۴. سانتی‌متر (cm) و میلی‌متر (mm) – بیشتر برای چاپ
این واحدها بر اساس سیستم متریک هستند و معمولاً برای طراحی‌های چاپی (مانند PDF یا اسناد دیجیتال) کاربرد دارند، اما در وب استفاده از آن‌ها توصیه نمی‌شود.
مثال:
div {
width: 5cm;
height: 10mm;
}
✅ این کد یک div با عرض ۵ سانتی‌متر و ارتفاع ۱۰ میلی‌متر ایجاد می‌کند.
۵. اینچ (in) – اندازه‌گیری استاندارد چاپ
واحد اینچ (in) در چاپ و طراحی اسناد دیجیتالی استاندارد است. هر ۱ اینچ برابر با ۲.۵۴ سانتی‌متر است.
مثال:
div {
width: 2in; /* 5.08cm */
}
✅ این مقدار معادل ۲ اینچ (۵.۰۸ سانتی‌متر) است و در نمایشگرهای مختلف یکسان نمایش داده می‌شود.
۳. مقایسه‌ی واحد های مطلق و انتخاب بهترین گزینه
| ویژگی | px | pt | pc | cm/mm | in |
|---|---|---|---|---|---|
| مناسب برای وب | ✅ بله | ❌ خیر | ❌ خیر | ❌ خیر | ❌ خیر |
| مناسب برای چاپ | ❌ خیر | ✅ بله | ✅ بله | ✅ بله | ✅ بله |
| تغییر در نمایشگرهای مختلف | ❌ خیر | ❌ خیر | ❌ خیر | ❌ خیر | ❌ خیر |
| واکنش‌گرایی (Responsive) | ❌ ندارد | ❌ ندارد | ❌ ندارد | ❌ ندارد | ❌ ندارد |
✅ پیکسل (px) بهترین انتخاب برای طراحی وب است.
✅ سانتی‌متر (cm)، میلی‌متر (mm) و اینچ (in) برای چاپ توصیه می‌شوند.
✅ پوینت (pt) و پیکا (pc) بیشتر در صنعت چاپ کاربرد دارند.
۴. چرا در طراحی وب بیشتر از px استفاده می‌شود؟
- سازگاری بالا در مرورگرها و دستگاه‌های مختلف.
- کنترل دقیق اندازه‌ها بدون تغییر ناگهانی در المان‌ها.
- عدم وابستگی به عناصر والد (بر خلاف واحدهای نسبی مانند
emیاrem).
۵. تفاوت واحدهای مطلق و نسبی در CSS
واحدهای مطلق اندازه‌های ثابت و غیرقابل تغییر دارند، اما واحدهای نسبی بسته به اندازه‌ی عناصر دیگر تغییر می‌کنند.
مقایسه‌ی واحدهای مطلق و نسبی:
| نوع واحد | مثال | توضیح |
|---|---|---|
| مطلق (Absolute) | px, cm, mm, in, pt, pc | اندازه‌ی ثابت و مستقل از والد |
| نسبی (Relative) | %, em, rem, vw, vh | اندازه‌ی متغیر نسبت به والد یا صفحه |
✅ در طراحی مدرن و واکنش‌گرا، ترکیب واحدهای مطلق و نسبی بهترین نتیجه را دارد.
نتیجه‌گیری
واحدهای اندازه‌گیری مطلق در CSS برای طراحی‌های ثابت، چاپ و المان‌هایی که نباید تغییر اندازه دهند، مناسب هستند.
pxبهترین گزینه برای طراحی وب است.cm،mm،inدر طراحی چاپی استفاده می‌شوند.ptوpcدر طراحی اسناد دیجیتال و تایپوگرافی کاربرد دارند.
🔹 اگر به طراحی واکنش‌گرا نیاز دارید، ترکیب px با واحدهای نسبی (rem, vw, vh) را در نظر بگیرید.
