چند واحد اندازه گیری در css که احتمالا با آن آشنایی ندارید!

شاید پیاده سازی یک قالب با تکنیکهایی که میدانیم کار ساده ای به نظر برسد اما متاسفانه یا خوشبختانه وب در حال گسترش هست و این پیشرفت تکنولوژی در زمینه وب باعث میشود مسائلی در زمینه طراحی بوجود آید که نیاز به راه حل های تازه تری داریم.

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

واحد rem

اجازه بدید با واحدی شروع کنیم که مشابه واحدهایی هست که قبلا با آنها کار کرده ایم. واحد (em) به اندازه فعلی فونت شما اشاره میکند. بعنوان مثال اگر شما برای المان body سایز فونت را ۱۴ پیکسل در نظر گرفتید برای همه عناصر داخلی هم همین اندازه در نظر گرفته میشود.

به مثال زیر دقت کنید:

 <body>
    <div class="test">Test</div>
</body>

و دستورات سی اس اس

body {
    font-size: 14px;
}
div {
    font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}

ما در اینجا برای المان div فونت سایز را ۱٫۲em در نظر گرفتیم که چون به عنصر والد آن قبلا ۱۴px نسبت داده شده پس سایز فونت div به صورت زیر محاسبه میشود:

۱۴px * 1.2 = 16.8px

حال اگر یک سری div تو در تو داشته باشیم ( و سایز فونت div ها ۱٫۲em باشد ) نتیجه کار به صورت زیر خواهد بود:

See the Pen Cascading em Values by hamed (@cgtv) on CodePen.

خب امیدوارم متوجه شده باشید داستان چیه! برای جا افتادن بهتر مساله پیشنهاد میکنم یک فایل html آماده کنید و شروع کنید کار کردن با مقادیر.

البته از em میتونید برای همه property ها استفاده کنید مثل padding و margin و طول و عرض و…

واحد em همیشه عنصر پدر خودش رو مورد نظر قرار میده مثلا اگر کدی به صورت زیر داشته باشیم:

See the Pen gMYZrq by hamed (@cgtv) on CodePen.

فکر میکنم متوجه شده باشید.

در همین راستا گاهی به ارث بردن خاصیت از والد یه مقدار گیج کننده هست و نیاز به محاسبه داره و شاید بیشتر برای اندازه دادن به فونت ها مناسب باشه ، قصد دارم شما رو با واحد rem آشنا کنم که بسیار شبیه واحد em هست ولی تنها فرقش این هستش که همواره عنصر root رو مورد نظر قرار میده یعنی تگ <html> البته در بسیار مواقع اینطور هست. در واقع منظور از rem همون root em هست. این مساله باعث میشه اندازه دادن به عناصرهای داخلی کار ساده تری بشه و در طراحی ریسپانسیو و اندازه دادن ها در طراحی گرید با مشکل کمتری مواجه بشیم.

اگر توضیحات بیشتری در زمینه کار با این دو واحد اندازه گیری در css رو میخواهید مطالعه کنید پیشنهاد میکنم مقاله رهایی از پیکسل ها رو از سالار کابلی مطالعه کنید.

واحد vh و vw

تکنیک های طراحی ریسپانسیو به شدت از قوانین مربوط به ٪درصد (percentage) پیروی میکنه. اما متاسفانه این قوانین در خیلی از مواقع کارساز نیستند. به عنوان مثال خصیصه width در css وابسته به عنصر دربردارنده والد خود  هست ، حالا اگر ما بخواهیم این وابستگی وجود نداشته باشه و خصیصه width یا height وابسته به اندازه صفحه یا viewport باشه چکار باید کنیم؟

در اینجا واحد اندازه گیری vh و vw به کار ما می آیند.

در واقع vh مساوی است با ۱/۱۰۰ اندازه صفحه ای که کاربر دارد. به عبارت بهتر اگر سایز صفحه کاربر ۹۰۰px باشد ، ۱vh مساوی است با ۹px

به طور مشابه اگر عرض صفحه کاربر ۷۵۰px باشه ۱vw برابر است با ۷٫۵px

ظاهر به نظر میرسه این واحد اندازه گیری در آینده خیلی پرمصرف باشه!

مثال زیر به خوبی کاربرد این واحد رو به شما نشون میده. سایز مرورگر رو تغییر بدید و ببینید چه اتفاقی برای اندازه فونت میافته»

See the Pen Demo of vw Unit by Envato Tuts+ (@tutsplus) on CodePen.

واحد vmin و vmax

خب همونطور که گفته شد vh و vw به طول و عرض صفحه یا viewport وابستگی دارند. در کنار اون واحد اندازه گیری vmin و vmax رو داریم به ماکسیمم و مینیمم اندازه اشاره میکند.

مثلا اگر عرض صفحه ۱۲۰۰ پیکسل و طول صفحه ۸۰۰ پیکسل باشد. ۱vmax اندازه عرض را در نظر میگیرد چرا که عرض صفحه بزرگتر از طول آن است و به همین ترتیب vmin اندازه طول صفحه را در نظر میگیرد چرا که اندازه کمتری نسبت به طول دارد.

حال اگر عرض صفحه مورد نظر ما ۸۰۰ و طول آن ۱۲۰۰ باشد دقیقا برعکس این اتفاق رخ خواهد داد. یعنی vmax

نویسندهحامد میاحیان

من حامد میاحیان هستم :) در این وبلاگ آموزشهای ویدئویی در رابطه ( طراحی وب ) قرار میدم.

12 دیدگاه مرتبط با “چند واحد اندازه گیری در css که احتمالا با آن آشنایی ندارید!

  1. وای عالی بود. حتما تو طرحایی که میزنن ازش استفاده می کنم. اینطوری یه رسپانسیویتی خوب خواهم داشت. ایول

  2. عالی بود

    ممنون

  3. خیلی عالی بود
    ممنون از به اشتراک گذاریش

  4. سلام خیلی خووب بود ازش استفاده کردم

  5. سلام ممنونم از سایت خوبی که دارید موفق باشید

  6. سلام ممنون از اموزش کاملی که در سایتتون قرار دادید

  7. سلام ممنون از سایتتون.

  8. ممنون از توضیحات کاملی که در سایتتون قرار دادید

  9. سایت خوبی دارید موفق باشید

  10. خیلی متشکر از سایت شما

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *