واحدهای Viewport Width و Viewport Height از مهم‌ترین واحدهای نسبی در CSS هستند که در طراحی ریسپانسیو (واکنش‌گرا) کاربرد زیادی دارند.

این واحدها اندازه‌ی عناصر را بر اساس ابعاد صفحه نمایش (ویوپورت) تنظیم می‌کنند و به‌ویژه در طراحی‌های تمام صفحه (Full-screen) و انعطاف‌پذیر (Fluid Layouts) بسیار مفید هستند.

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

۱. معرفی واحدهای vw و vh در CSS

• vw (Viewport Width) → نسبت به عرض کل ویوپورت (صفحه نمایش) اندازه‌گیری می‌شود.
• vh (Viewport Height) → نسبت به ارتفاع کل ویوپورت اندازه‌گیری می‌شود.

🔹 قانون کلی:

• 1vw = ۱٪ از عرض صفحه نمایش
• 1vh = ۱٪ از ارتفاع صفحه نمایش

✅ مثال پایه:

.full-width {
    width: 100vw; /* 100% از عرض صفحه */
}

.full-height {
    height: 100vh; /* 100% از ارتفاع صفحه */
}

🔹 در این مثال، .full-width عرض کامل صفحه و .full-height ارتفاع کامل صفحه را اشغال خواهد کرد.

۲. تفاوت vw و vh با px و %

واحدهای vw و vh نسبت به اندازه‌ی صفحه تغییر می‌کنند، اما px و % رفتار متفاوتی دارند:

✅ نتیجه: vw و vh برای طراحی فول‌اسکرین و ریسپانسیو مناسب‌تر از px هستند.

۳. کاربردهای vw و vh در طراحی ریسپانسیو

۱. تنظیم فونت دینامیک بر اساس اندازه صفحه

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

.responsive-text {
    font-size: 5vw; /* 5% از عرض صفحه */
}

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

۲. طراحی سکشن‌های فول‌اسکرین

با 100vh می‌توان بخشی از سایت را به صورت تمام صفحه (Fullscreen) تنظیم کرد.

.full-screen {
    width: 100vw;
    height: 100vh;
    background-color: #3498db;
    display: flex;
    justify-content: center;
    align-items: center;
}

✅ در این مثال، سکشن کل صفحه نمایش را پر خواهد کرد.

۳. تنظیم تصاویر و ویدیوهای واکنش‌گرا

.full-image {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

✅ object-fit: cover; باعث می‌شود که تصویر بدون تغییر نسبت‌ها، کل صفحه را پوشش دهد.

۴. استفاده از vh برای طراحی هدر و فوتر ثابت

.header {
    height: 10vh; /* 10% از ارتفاع صفحه */
    background-color: #222;
    color: white;
}

✅ این مقدار باعث می‌شود که هدر همیشه ۱۰٪ از ارتفاع صفحه را اشغال کند، صرف نظر از اندازه‌ی صفحه.

۴. ترکیب vw و vh با واحدهای دیگر

۱. ترکیب با vmin و vmax

• vmin = ۱٪ مقدار کوچک‌تر بین vw و vh
• vmax = ۱٪ مقدار بزرگ‌تر بین vw و vh

مثال:

.box {
    width: 50vmin; /* 50% از کوچک‌ترین مقدار بین عرض و ارتفاع */
    height: 50vmax; /* 50% از بزرگ‌ترین مقدار بین عرض و ارتفاع */
}

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

۲. ترکیب با calc() برای محاسبات پویا

.dynamic-height {
    height: calc(100vh - 50px); /* ارتفاع ویوپورت منهای ۵۰ پیکسل */
}

✅ این مقدار در مواقعی مفید است که بخواهیم ارتفاع یک المان را به صورت دینامیک کاهش دهیم.

۵. مشکلات احتمالی vh در موبایل و راه‌حل‌ها

مشکل: در برخی مرورگرهای موبایل، 100vh به دلیل نوار ابزار مرورگر بزرگ‌تر از مقدار واقعی می‌شود و باعث ایجاد اسکرول ناخواسته خواهد شد.

🔹 راه‌حل: استفاده از @media برای تنظیم مقدار vh در موبایل:

@media (max-width: 768px) {
    .full-height {
        height: 90vh; /* در موبایل ارتفاع کمتر تنظیم می‌شود */
    }
}

✅ این روش باعث جلوگیری از مشکلات مربوط به اسکرول اضافی در موبایل می‌شود.

۶. مقایسه vw و vh با سایر واحدهای CSS

✅ vw و vh برای طراحی ریسپانسیو و سکشن‌های فول‌اسکرین ایده‌آل هستند.
✅ vmin و vmax برای طراحی‌های انعطاف‌پذیر و تناسب‌یافته مناسب هستند.

۷. نتیجه‌گیری

• vw و vh اندازه المان‌ها را بر اساس عرض و ارتفاع صفحه تنظیم می‌کنند.
• مناسب برای فونت‌های داینامیک، بک‌گراندهای فول‌اسکرین، تصاویر واکنش‌گرا و هدرهای ثابت هستند.
• vmin و vmax برای ایجاد تناسب در اندازه‌ی المان‌ها در دستگاه‌های مختلف مفیدند.
• در طراحی ریسپانسیو، ترکیب vw و vh با واحدهای دیگر مانند calc(), % و rem نتیجه‌ی بهتری دارد.

🔹 با استفاده صحیح از vw و vh، می‌توان طراحی‌های کاملاً مقیاس‌پذیر و واکنش‌گرا ایجاد کرد که در تمام دستگاه‌ها به خوبی نمایش داده شوند.