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

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

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

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

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

• px: پیکسل
• pt: نقطه یا point
• pc: پیکا
• cm: سانتی متر
• mm: میلی متر
• in: اینچ

واحد px یا پیکسل

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

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

ساده بگم، در CSS، اندازه پیکسل با تعریف کوتاه زیر مشخص شده:

1px = 1/96 in

بدین ترتیب، با توجه به نامتغیر بودن واحد اینچ، ابعاد یک پیکسل در تمامی دستگاه ها یکسان خواهد بود.

واحد pt یا نقطه

واحد نقطه، شباهت بسیاری به واحد پیکسل داره.

این واحد، ثابت و نامتغیر هست و در تمامی دستگاه ها به یک اندازه ظاهر می‌شه.

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

1pt = 1/72 in

واحد pc یا پیکا

واحد پیکا معمولا خیلی مورد استفاده قرار نمیگیره.

اندازه اش هم یه اندزه ثابت و نامتغیر هست.

1pc = 1/6 in

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

این واحد ها هم در css مورد استفاده قرار نمیگرن، چون کاربردشون در مسائل دیگه‌ای هست.

1 in = 2.54 cm = 25.4 mm

واحد های وابسته در CSS

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

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

%

vw و vh

em

ch

rem

واحد % یا درصد

این واحد، رایج ترین واحد استفاده شده در cssهست . که برای سهولت در طراحی واکنشگرا بهتر هست که از این واحد اندازه گیری استفاده بشه

یک عنصر div با کد زیر رو فرض کنین:

div{
   width: 90%;
}

تو مثال بالا div ما عرض 90% گرفته، این عنصر تحت هر شرایطی(چه صفحه تبلت باشه ؛ چه صفحه موبایل) هموازه 90% صفحه والد خودش رو اشغال میکنه.

واحد های vh و vw

این واحد ها، مخفف عبارات viewport height و viewport width هستن.

به قسمتی از صفحه وب که ما مشاهده میکنیم viewportگفته میشه.

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

به کد زیر توجه کنین:

div{
   width: 40vw;
}

توی مثال بالا اندزه عنصر ما همواره 40درصد عرض viewport ماهست. vh هم مشابه vw هست با این تفاوت که ارتفاع عنصر رو برحسب ارتفاع viewport تعریف میکنه.

واحد em

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

فونت ها می‌تونن سایز های متفاوتی داشته باشن، برای آشنایی با سایز فونت در CSS می‌تونین به مقاله font-size در CSS مراجعه کنین.

برای درک بهتر این واحد، به کد زیر توجه کنین:

کد HTML:

<div class=&quotparent&quot>
   <div class=&quotchild&quot></div>
</div>

کد CSS:

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

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

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

واحد rem

واحد rem شبیه به em عمل میکنه و تفاوتشون در این هست ک rem تاثیرش رو از روت المنت یا همون تگ html میگیره و دیگه به عنصر والدش وابسته نیست با مثال زیر راحت تر متوجه موضوع میشیم

کد HTML:

<div class=&quotparent&quot>
   <div class=&quotchild&quot></div>
</div>

استایل دهی:

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

الان دیگه اندازه عنصر div ما بر اساس تگ html محاسبه میشه و مقدار 60پیکسل رو میگیره