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

با واحد های vh  و vw می توانیم عناصر صفحه را متناسب با محدوده نمایش کاربر , بدون استفاده از جاوا اسکریپت نمایش بدهیم. هنگام ایجاد صفحات رسپاسیو بیشتر از واحد درصد (%) استفاده میکنیم , اما واحد درصد (%) اندازه ها را بر حسب نزدیک ترین والد مشخص میکند. شاید ما بخواهیم سایز یک قسمت رو بر حسب سایز پنجره ی مرورگر (قسمت قابل رویت مرورگر) مشخص کنیم . اینجا دو واحد اندازه گیری vw و vh به کمک ما می آیند .

در ادامه بجر این دو واحد , با دو واحد دیگر به نام های vmin و vmax آشنا میشوید .

vw و vh چیست ؟

واحد vh برابر با یک صدم (۰/۰۱) ارتفاع مرورگر و vw برابر با یک صدم (۰/۰۱) پهنای مرورگر می باشد . پس مثلا اگر مانیتور ما 1920 در 1080 باشد , 1vw مساوی 19.2 پیکسل و 1vh مساوی 10.8 پیکسل خواهد بود.

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

#vms{
    width:100vw;
    height:100vh;
}

البته در خاطر داشته باشید که این دو واحد اندازه گیری مخصوص width و height نیستند و میتوانید برای بقیه پراپرتی ها استفاده نمایید . مثلا :

 #vms{
    font-size:6vw;
}

vmin و vmax چیست :

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

برای مثال اگر اندازه ی عرض مرورگر برابر 1900px و ارتفاع برابر با 1000px باشه اندازه ی واحد vmin برابر با 19px و اندازه ی vmax برابر با 10px خواهد بود. حالا اگه اندازه مرورگر رو تغییر بدیم و عرض مرورگر برابر با 700px و ارتفاع برابر 300px بشه اندازه ی واحد vmin برابر با 7px و اندازه ی vmax برابر 3px خواهد بود.

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

به طور کلی :

vmin یعنی 1 واحد vh  یا vw می باشد ( هر واحدی که کوچکتر باشد )

vmax یعنی 1 واحد vh  یا vw می باشد ( هر واحدی که بزرگتر باشد )

پخش اختصاصی

گرداوری : وحید مجیدی