جلسه ۲۳ – واحد ها در CSS

واحد های مختلفی در CSS برای تعریف کردن اندازه های مختلف وجود داره. واحد های اندازه گیری متفاوت در CSS را کدامند؟ تعداد محدودی از این واحد ها رو در مقالات قبل یاد گرفتیم، اما آیا واحد ها فقط به همین تعداد محدود می‌شن؟

مسلما پاسخ منفیه.

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

واحد های مستقل در CSS

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

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

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

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

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

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

واحد پیکسل، عمومی ترین واحد مورد استفاده در CSS به حساب میاد.

جدا از فایده ها و مضرات اون در طراحی وب سایت، اولین واحدی هست که باهاش آشنا می‌شیم 🙂

به صورت پیشفرض، اندازه پیکسل ها در دستگاه های مختلف، می‌تونه متفاوت باشه، اما CSS این مشکل رو با در نظر گرفتن اندازه یک پیکسل در دستگاهی با تراکم پیکسل 96DPI (نقطه در اینچ) در نظر گرفته.

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

1px = 1/96 in

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

واحد pt یا نقطه

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

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

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

1pt = 1/72 in

واحد pc یا پیکا

واحد پیکا، واحدیه که به اندازه pt و px استفاده نمی‌شه.

اندازه اون هم یک مقدار نامتغیره و به شکل زیر مشخص می‌شه:

1pc = 1/6 in

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

این واحد ها، واحد هایی هستن که از بچگی باهاشون آشنا شدیم و با این واحد ها بزرگ شدیم.

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

رابطه بین این سه به شکل زیر مشخص می‌شه:

1 in = 2.54 cm = 25.4 mm

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

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

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

• %
• vw و vh
• em
• ch
• rem

واحد % یا درصد

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

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

div{
   width: 90%;
}

این عنصر، همواره دارای عرضی برابر با نود درصد عرض عنصر پدر خود خواهد بود.

چه در صفحه دسکتاپ، چه در صفحه تبلت و چه در صفحه تلفن همراه.

در صورت تغییر کردن عرض عنصر پدر، عرض عنصر div هم به تناسب تغییر خواهد کرد، اما همیشه نود درصد عنصر پدر خودش خواهد موند.

واحد های vh و vw

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

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

برای مطالعه بیشتر در مورد viewport، می‌تونین به مقاله واکنش گرایی و ابعاد عناصر در میزفا مراجعه کنین 🙂

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

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

div{
   width: 40vw;
}

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

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

واحد em

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

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

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

کد HTML:

<div class="parent">
   <div class="child"></div>
</div>

کد CSS:

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

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

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

واحد rem

این واحد، مشابه واحد em عمل می‌کنه.

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

یه همین دلیل، به این واحد rem یا root em (مربوط به عنصر ریشه وب سایت یا html) گفته می‌شه.

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

کد HTML:

<div class="parent">
   <div class="child"></div>
</div>

کد CSS:

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

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

پایان ترم

نتیجه گیری

تو این مقاله، با واحد های مستقل و وابسته آشنا شدیم.

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

سپس انواع این واحد ها رو یاد گرفتیم و دیدیم که چطور می‌تونیم باهاشون ابعاد عناصرمون رو مشخص کنیم 🙂

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

مدیر محتوا: علی اسمعیلی