آموزش کامل واحدهای اندازه گیری در CSS

مقدمه

در CSS، استفاده از واحدهای اندازه‌گیری صحیح برای طراحی دقیق و واکنش‌گرا بسیار اهمیت دارد. با استفاده از واحدهای نسبی و مطلق می‌توان عناصر را به درستی مقیاس‌بندی و موقعیت‌دهی کرد. برای یادگیری کامل CSS و طراحی انعطاف‌پذیر پیشنهاد می‌کنیم دوره جامع را مشاهده کنید: دوره آموزش CSS.

توضیح مفهومی واحدهای اندازه‌گیری

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

• واحدهای مطلق: px, cm, mm, in, pt, pc
• واحدهای نسبی: %, em, rem, vh, vw, vmin, vmax
• واحدهای فونت: em, rem, ex, ch
• استفاده صحیح از واحدها برای طراحی واکنش‌گرا و مقیاس‌پذیر

مثال عملی با کد

استفاده از واحد px و % برای عرض و ارتفاع:

div.box {
  width: 300px;
  height: 150px;
}

div.container {
  width: 80%;
  height: 50%;
}

استفاده از em و rem برای اندازه فونت:

p {
  font-size: 1.2em;
}

h1 {
  font-size: 2rem;
}

استفاده از viewport units:

section {
  width: 100vw;
  height: 50vh;
}

نکات مهم و توضیحات تکمیلی

• واحدهای مطلق برای اندازه ثابت مناسب هستند و واکنش‌گرا نیستند.
• واحدهای نسبی انعطاف بیشتری دارند و در طراحی Responsive توصیه می‌شوند.
• rem و em برای فونت و فاصله‌بندی مناسب هستند.
• واحدهای viewport برای کنترل اندازه عناصر نسبت به اندازه صفحه کاربرد دارند.

ادامه آموزش CSS

برای یادگیری نحوه اولویت‌بندی عناصر و مدیریت سلسله‌مراتب در CSS، ادامه مسیر یادگیری را در دوره جامع دنبال کنید: ادامه یادگیری در دوره CSS.