تابز مدیا | آموزش قدم به قدم برنامه نویسی

واحدها (units)

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

واحدهای مطلق (Absolute units) ➝ همیشه ثابت هستن.
واحدهای نسبی (Relative units) ➝ نسبت به عنصر یا صفحه تغییر می‌کنن.

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

این‌ها همیشه مقدار مشخص دارن و به شرایط صفحه وابسته نیستن:

واحد	توضیح	نمونه
`px`	پیکسل (پرکاربردترین واحد)	`width: 200px;`
`cm`	سانتی‌متر	`width: 5cm;`
`mm`	میلی‌متر	`height: 30mm;`
`in`	اینچ (1in = 2.54cm)	`width: 2in;`
`pt`	پوینت (1pt = 1/72 inch)	`font-size: 12pt;`
`pc`	پیکا (1pc = 12pt)	`font-size: 2pc;`

📌 بیشتر در طراحی وب، فقط از px استفاده می‌کنیم.

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

این واحدها به شرایط نمایش بستگی دارن (اندازه صفحه، فونت والد و …).

واحد	توضیح	نمونه
`%`	درصدی از اندازه والد	`width: 50%;`
`em`	نسبت به اندازه فونت والد	`font-size: 2em;` (دو برابر والد)
`rem`	نسبت به اندازه فونت ریشه (html)	`font-size: 1.5rem;`
`vw`	درصدی از عرض ویوپورت (صفحه)	`width: 50vw;` (نصف عرض صفحه)
`vh`	درصدی از ارتفاع ویوپورت	`height: 100vh;` (کل ارتفاع صفحه)
`vmin`	مقدار کمتر بین `vw` و `vh`	`font-size: 5vmin;`
`vmax`	مقدار بیشتر بین `vw` و `vh`	`font-size: 5vmax;`
`ch`	عرض کاراکتر `0` در فونت جاری	`width: 40ch;`

✅ مثال کاربردی


<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>CSS Units</title>
  <style>
    .absolute {
      width: 300px;
      height: 100px;
      background: lightcoral;
    }
    .relative {
      width: 50%;
      height: 20vh;
      background: lightblue;
    }
    .text {
      font-size: 2em;   /* دو برابر سایز والد */
    }
    .root-text {
      font-size: 1.5rem; /* نسبت به ریشه (html) */
    }
  </style>
</head>
<body>
  <div class="absolute">300px × 100px</div>
  <div class="relative">50% عرض والد و 20vh ارتفاع صفحه</div>
  <p class="text">این متن 2em است</p>
  <p class="root-text">این متن 1.5rem است</p>
</body>
</html>