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

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

در زبان CSS، به طور کلی دو نوع واحد اندازه‌گیری وجود دارد:

1. واحدهای اندازه‌گیری مطلق یا Absolute: در این نوع واحدها، مقدار اندازه‌گیری به صورت مطلق و ثابت تعیین می‌شود. به عبارت دیگر، ابعاد مشخص شده به طور مستقل از سایر عوامل با توجه به واحد اندازه‌گیری اعمال می‌شود.

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

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

واحدهای اندازه گیری مطلق یا Absolute

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

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

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

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

واحد های مطلق عبارتند از:

• پیکسل (px)
• نقطه یا پوینت (pt)
• سانتی متر (cm)
• میلی متر (mm)
• اینچ (in)

پیکسل (px):

• پیکسل یکی از متداول‌ترین واحدهای اندازه‌گیری است.
• استفاده از px برای تعیین اندازه‌های دقیق و ثابت عناصر.

.example {
    width: 300px;
    height: 200px;
}

واحد نقطه(pt):

واحد نقطه، شباهت بسیاری به واحد پیکسل دارد. این واحد، ثابت و نامتغیر است و در تمامی دستگاه ها به یک اندازه ظاهر می‌شود. تفاوت واحد نقطه و پیکسل، تنها در اندازه آن هاست به این صورت که 1pt=1.3333px

.example {
    font-size: 12pt;
    margin-top: 10pt;
    padding-bottom: 8pt;
}

واحد های اینچ، میلی متر و سانتی متر :

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

.example {
    margin-bottom: 1cm;
    padding-left: 2mm;
}

واحدهای اندازه گیری نسبی یا Relative

نام این مفهوم “وابستگی نسبی” است! به عبارت دیگر، ویژگی نسبی بودن به معنای داشتن یک نسبت یا تناسب مشخص است. به عنوان مثال، زمانی که از واحدهای اندازه‌گیری نسبی استفاده می‌کنیم، مانند در مقایسه اندازه تگ H2 با اندازه تگ P، مقداری خاص به اندازه تگ H2 نسبت به اندازه تگ P تعیین می‌شود و به این ترتیب، اندازه تگ H2 به نسبت اندازه تگ P مشخص می‌شود.

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

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

مهم ترین این واحد ها، عبارتند از:

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

percent (%):

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

.container {
    width: 80%;
}

vw – vh:

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

برای مثال، در کد زیر:

div {
   width: 40vw;
}

تعیین شده که عرض عنصر div همواره باید چهل درصد از عرض viewport باشد. به همین ترتیب، واحد vw عرض عنصر را بر اساس درصدی از عرض viewport تنظیم می‌کند، و واحد vh نیز ارتفاع عنصر را بر اساس درصدی از ارتفاع viewport تعریف می‌نماید.

واحد em :

این واحد، تغییرات خود را بر حسب سایز فونت عنصر والد انجام می‌دهد. برای درک بهتر این واحد، به کد زیر توجه کنید:

div .parent {
   font-size: 16px;
}
div .child{
   width: 3em;
}

واحد em، همواره به عنوان شاخصی از سایز فونت عنصر والد عمل می‌کند. بر اساس کد بالا، عرض عنصر child سه برابر سایز فونت عنصر والد یا ۴۸ پیکسل خواهد بود.

واحد rem :

این واحد، مشابه واحد em عمل می‌کند. با این تفاوت که از سایز فونت عنصر والد تاثیر نمی‌گیرد، بلکه از سایز فونت خود عنصر HTML تاثیر می‌پذیرد. به همین دلیل، به این واحد rem یا root em (مربوط به عنصر ریشه وب سایت یا HTML ) گفته می‌شود. به کد زیر توجه کنید:

* {
   font-size: 20px;
}
div .parent{
   font-size: 16px;
}
div .child{
   width: 3rem;
}

بر خلاف واحد em، توسط واحد rem، عرض عنصر child به اندازه ۶۰ پیکسل تنظیم خواهد شد (سه برابر سایز فونت عنصر root).