cssطراحی سایت

جلسه ۳۲: vh و vw در CSS

واحدهای vh و vw بر اساس ارتفاع و عرض دید کاربر است. بیایید نگاهی به این واحدها بیندازیم. طراحی رسپانسیو تا حد زیادی به مقادیر درصد بستگی دارد. به عنوان مثال اندازه گیری عرض یک عنصر مانند این آسان است:

.my-element {
   width: 50%
}

در بسیاری از موارد ، درصد ها راضی کننده نیستند. مانند EM که بر اساس اندازه قلم والد مقیاس می شود ، خصوصیات عرض و ارتفاع نیز بر اساس عنصر اصلی مقیاس بندی می شوند. بنابراین ، عرض: ۵۰٪ دقیقاً به معنای ۵۰٪ از عرض کل دستگاه کاربر نیست. ممکن است در نهایت ۵۰٪ از عنصر اصلی باشد. خود این عنصر والد نیز ممکن است طوری تنظیم شود که دارای عرض ۸۰٪ نیز باشد. این می تواند گیج کننده شود. خدا را شکر. ما کمک داریم واحدهای vw و vh بر اساس ویپورت یعنی کل صفحه نمایش تعیین می شوند. vw مخفف عرض ویوپورت است و vh مخفف ارتفاع چشم انداز است.

مثال ها

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

.entire-height {
  height: 100vh
}

کار تمام شد! آیا می خواهید کل عرض ویوپورت را پر کند؟

.entire-width {
   width: 100vw
}

هه ، انجام شد!

نوشته های مشابه

دیدگاهتان را بنویسید

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

دکمه بازگشت به بالا