CSS – واحدها (Units)

واحدهای اندازه‌گیری در CSS (CSS Units)

در CSS واحدهای مختلفی برای تعیین طول وجود دارند. بسیاری از ویژگی‌های CSS مانند width، margin، padding و font-size از مقادیر طول استفاده می‌کنند.

یک “طول” عددی است که به دنبال آن یک واحد طول می‌آید، مثل 10px یا 2em.

مثال:

h1 {
  font-size: 60px;
}

p {
  font-size: 25px;
  line-height: 50px;
}

نکته: نباید فضای خالی بین عدد و واحد وجود داشته باشد. اگر مقدار برابر ۰ باشد، می‌توان واحد را حذف کرد.

برای برخی از ویژگی‌های CSS، طول‌های منفی نیز مجاز است.

واحدهای مطلق (Absolute Lengths)

واحدهای طول مطلق ثابت هستند و طولی که با این واحدها بیان می‌شود، دقیقاً به همان اندازه نمایش داده می‌شود.

این واحدها برای استفاده در صفحات نمایش توصیه نمی‌شوند، زیرا اندازه صفحه‌های نمایش متنوع است، اما می‌توانند برای خروجی‌هایی که اندازه آنها مشخص است، مانند طرح‌های چاپ، استفاده شوند.

واحدهای مطلق:

واحد توضیحات
cm سانتی‌متر
mm میلی‌متر
in اینچ (1in = 96px = 2.54cm)
px پیکسل (1px = 1/96 از 1in)
pt پوینت (1pt = 1/72 از 1in)
pc پیکا (1pc = 12pt)

نکته: پیکسل‌ها (px) نسبت به دستگاه نمایش تغییر می‌کنند. برای دستگاه‌های با DPI پایین، 1px برابر با یک پیکسل دستگاه است. اما برای چاپگرها و نمایشگرهای با رزولوشن بالا، 1px ممکن است شامل چندین پیکسل دستگاه باشد.

واحدهای نسبی (Relative Lengths)

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

واحدهای نسبی:

واحد توضیحات
em نسبت به اندازه فونت عنصر (مثلاً 2em یعنی ۲ برابر اندازه فونت فعلی)
ex نسبت به ارتفاع حرف “x” در فونت فعلی (کمتر استفاده می‌شود)
ch نسبت به عرض حرف “0” (صفر)
rem نسبت به اندازه فونت عنصر ریشه (معمولاً <html>)
vw نسبت به ۱ درصد از عرض نمای مرورگر
vh نسبت به ۱ درصد از ارتفاع نمای مرورگر
vmin نسبت به ۱ درصد از کوچک‌ترین بعد نمای مرورگر
vmax نسبت به ۱ درصد از بزرگ‌ترین بعد نمای مرورگر
% نسبت به عنصر والد

نکته: واحدهای em و rem برای ایجاد چیدمان‌های کاملاً مقیاس‌پذیر بسیار کاربردی هستند.

Viewport: اندازه پنجره مرورگر است. به عنوان مثال، اگر عرض نمای مرورگر 50 سانتی‌متر باشد، 1vw = 0.5 سانتی‌متر است.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

بیشتر بخوانید
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

بیشتر بخوانید
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.