واحدهای اندازه‌گیری در css

برای بیان بعضی از خصوصیات در css نیاز به واحدهای اندازه‌گیری داریم؛ مثل عرض و ارتفاع یا margin و padding و غیره.

اما واحدهای زیادی در css وجود دارد که باعث می‌شود، انتخاب واحد مناسب چالشی در کار برنامه نویس‌ها باشد.

واحدها به دو دسته کلی تقسیم می‌شوند:

• مطلق یا Absolute
• نسبی یا Relative

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

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

واحدهای مطلق در css شامل موارد زیر است:

• واحدهای فیزیکی (in, cm, mm, pt, pc)
• پیکسل (px)

رابطه بین واحدهای فیزیکی به این شکل است

1in = 2.54cm = 25.4mm = 72pt = 6pc

استفاده از واحدهای فیزیکی در دنیای وب متداول نیست و پیشنهاد هم نمی‌شود.

اما پیکسل بر خلاف واحدهای فیزیکی بسیار پر کاربرد است. شاید تعریفی از مفهوم پیکسل در ذهن داشته باشید، اما باید بدانید تعریف پیکسل در css به شکل نقطه در اینچ است و این یعنی:

1px = 1/96 in

واحدهای نسبی در دنیای وب امروز که بحث واکنشگرایی بسیار اهمیت دارد گزینه بهتری نسبت به واحدهای مطلق هستند.

واحدهای نسبی پرکاربرد شامل:

• percent (%)
• em
• rem
• vw - vh

درصد مشخصا اشاره دارد به عنصر پدر هر عنصر و مثلا اگر عرض یک عنصر برابر با 50% باشد یعنی، عرض آن نصف عرض عنصر پدر همان عنصر است.

واحد em نمایانگر ویژگی font-size می‌باشد. یعنی 1em برابر مقداری است که برای ویژگی font-size عنصر تعیین می شود. اگر em برای خود font-size استفاده شود آنگاه برای محسابه کردن em باید به font-size پدر عنصر مورد نظر مراجعه کنیم.

font-size: 20px;
padding: 2em;    /*  2 * 20 = 40px  */

واحد rem کاملا شبیه به em عمل می‌کند با این تفاوت که به جای اینکه مبنای آن font-size عنصر مورد نظر باشد، اندازه فونتی است که برای عنصر ریشه یا همان html توسط ویژگی font-size تعیین شده است.

به قابی که در آن وب سایت را می‌بینیم اصطلاحا viewport می‌گویند و دو واحد vh و vw وابسته به اندازه viewport هستند. vh مخفف شده‌ی viewport height و معنی آن درصدی از ارتفاع و vw مخفف viewport width و معنی آن درصدی از عرض viewport است.

برای مطالعه بیشتر در این مورد می‌توانید به سایت w3schools هم سر بزنید.