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

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

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

این نوع واحدهای اندازه‌گیری به چیز دیگری وابسته نیستند و عموماً در دستگاه‌های (Devices) مختلف، برابر در نظر گرفته می‌شوند.

‌px

.wrap {
  width: 400px; 
}

واحد پیکسل، یکی از پر استفاده‌ترین واحد اندازه‌گیری در سی‌اس‌اس است. 1 پیکسل برابر با 1/96 دهم اینچ (0.0104166667 اینچ ⁓ 0.021 سانتی متر ) می‌باشد.

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

‌in

.wrap {
  width: 4in; 
}

1 اینچ برابر 96 پیکسل (2.54 سانتی‌متر) است.

‌cm

.wrap {
  width: 20cm; 
}

1 سانتی‌متر برابر با 37.8 پیکسل است.

‌mm

.wrap {
  width: 200mm; 
}

1 میلی‌متر برابر 3.78 پیکسل است.

‌pt (Points)

.wrap {
  width: 120pt; 
}

1 پوینت برابر 1.33 پیکسل و 1/72 دهم اینچ است. pt یک واحد اندازه‌گیری مرسوم متنی خارج از دنیای سی‌اس‌اس و برای چاپ صفحات است ولی محدودیتی در استفاده از آن در سی‌اس‌اس وجود ندارد.

‌pc (Pica)

.wrap {
  width: 12pc; 
}

پیکا نیز مشابه پوینت است با این تفاوت که 1pc برابر 12pt است.

واحدهای وابسته (Relative Length Units)

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

‌em

.wrap {
  width: 40em; 
}

واحد em در اصل یک واحد اندازه‌گیری در تایپوگرافی است که براساس عرض حرف M (به صورت Capital) در یک تایپ‌فیس (طرح حروف یا خانواده قلم) و اندازه قلم محاسبه می‌شود.

در سی‌اس‌اس زمانی که em برای font-size استفاده می‌شود، 1em برابر اندازه‌ی قلم عنصر مادر است:

.container {
  font-size: 16px;
}

.container p {
  font-size: 1em;
}

.container h2 {
  font-size: 3em;
}

.container h3 {
  font-size: 2em;
}

در مثال بالا، اندازه‌ی قلم p برابر 16px (16 * 1)، اندازه‌ی قلم h2 برابر 48px (16 * 3) و h3 برابر 32px (16 * 2) است.

زمانی که em برای ویژگی غیر از font-size استفاده شود (مانند width) 1em برابر اندازه‌ی قلم خود عنصر است.

نکته حائز اهمیت در زمان استفاده از واحد em این است که این واحد در زمان استفاده در برای font-size می‌تواند در خودش ضرب شود. به طور مثال کد html زیر را در نظر بگیرید:

<nav>
  <div>
    <p>
    </p>
  </div>
</nav>

اگر اندازه‌ی قلم در هر سه عنصر برابر 1.1em باشد، اندازه‌ی قلم واقعی و به نمایش درآمده در p (اگر اندازه‌ی قلم پیش‌فرض را 16px در نظر بگیریم) برابر ⁓ 21 پیکسل است (1.1 * 1.1 *1.1 * 16).

‌rem

.wrap {
  width: 40rem; 
}

واحد rem برابر اندازه‌ی واحد em عنصر منشأ است. این واحد تحت تأثیر اندازه یا تنظیمات عنصر مادر نیست، در عوض براساس منشأ سند است و منشأ سند در یک وبسایت عنصر html می‌باشد.

در بیشتر مرورگرها اندازه‌ی قلم پیش‌فرض برابر 16px است بنابراین 1rem برابر 16px می‌شود. اگر کاربر این اندازه را تغییر دهد، 1rem نیز به همان اندازه کم یا زیاد می‌شود.

‌%‌

.wrap {
  width: 50%; 
}

درصد نیز یک واحد پراستفاده است که بر اساس اندازه‌ی عنصر مادر محاسبه می‌شود:

div {
  width: 400px;
}

div p {
  width: 75%;
}

اندازه‌ی p برابر 300px است (400 * 0.75).

‌vw

.wrap {
  width: 10vw;
}

یک واحد vw برابر 1% عرض ویوپورت (viewport، اندازه‌ی پنجره مرورگر) است. اگر اندازه‌ی ویوپورت تغییر کند، مقدار محاسبه شده این اندازه نیز تغییر می‌کند.

‌vh

.wrap {
  width: 10vw;
}

یک واحد vh برابر 1% ارتفاع ویوپورت است.

‌ex

.wrap {
  width: 60ex;
}

واحد ex بر اساس اندازه حرف x در قلم فعلی است. در سی‌اس‌اس 1ex برابر اندازه حرف x یا، در صورت اینکه مرورگر نتواند این اندازه را از قلم بگیرد، برابر 0.5em است.

از آنجایی که اندازه حرف x می‌تواند در قلم‌های مختلف اندازه متفاوتی داشته باشد، این واحد استفاده زیادی ندارد.

‌ch

.wrap {
  width: 60ch;
}

واحد ch (Character Unit) نیز مشابه واحد ex با این تفاوت که اندازه‌ی آن بر اساس عرض کاراکتر 0 (صفر یا U+0030) در قلم مورد استفاده است.

البته ch تفاوت دیگری نیز با ex دارد آن هم این است که در یک سری از قلم‌ها عرض تمام کارکاترها به یک اندازه‌است (مانند قلم Courier) ولی در بقیه قلم‌ها به یک اندازه نیستند (مانند Helvitca).

‌vmin و vmax

.wrap {
  width: 20vmin;
}

.wrap {
  width: 20vmax;
}

واحد vmin برابر کمینه (Minimum) اندازه بین vh و vw و vmax برابر بیشینه این دو است.

منابع

● CSS values and units

● CSS Unit Guide: CSS em, rem, vh, vw, and more, Explained

● The Lengths of CSS

● What is the CSS ‘ch’ Unit?