في لغة CSS، تُعدّ vh و vw وحدات قياس نسبية (viewport-relative units) تعتمد على "منطقة العرض" (viewport)، وتتيح لك تحديد أحجام العناصر بناءً على أبعاد نافذة المتصفح. وتُعدّ هذه الوحدات مفيدة بشكل خاص لإنشاء تصاميم مرنة (responsive designs) تتكيف مع أحجام الشاشات المختلفة.

يرمز الاختصار vh إلى "ارتفاع إطار العرض" (viewport height)، وتساوي القيمة 1vh ما نسبته 1% من ارتفاع إطار العرض.

وبالمثل، ترمز vw إلى "عرض إطار العرض" (viewport width)، وتساوي 1vw نسبة 1% من عرض إطار العرض.

وهذا يعني أنه إذا قمت بضبط ارتفاع أحد العناصر على القيمة 100vh، فإنه سيشغل الارتفاع الكامل لمنطقة العرض (viewport)، بغض النظر عن الأبعاد الفعلية للجهاز مقاسةً بالبكسل.

تُعد هذه الوحدات مفيدةً بشكل خاص عندما ترغب في إنشاء تخطيطات تملأ الشاشة بالكامل، أو عناصر تحافظ على نسبة محددة (specific proportion) من مساحة الشاشة.

على سبيل المثال، قد ترغب في استخدامها لإنشاء قسم رئيسي (hero section) يملأ الشاشة بالكامل دائمًا.

<link rel="stylesheet" href="styles.css">

<section class="hero">
 <h1>مثال على 100vh / 100vw</h1>
 <p>يملأ هذا القسم نافذة المتصفح بأكملها.</p>
</section>
            

body {
margin: 0;
font-family: sans-serif;
border: 5px dashed #333;
}

.hero {
height: 100vh;
width: 100vw;
background-color: #add8e6;
padding: 2em;
}

.hero h1 {
font-size: 2em;
margin-bottom: 0.5em;
}

.hero p {
font-size: 1em;
}
            

معاينة:

يضمن كود CSS هذا أن يكون القسم الرئيسي (hero section) مطابقاً تماماً لحجم نافذة العرض، بغض النظر عن حجم شاشة الجهاز.

يمكن أيضاً استخدام وحدتي vh و vw في تنسيق النصوص (typography) لإنشاء أحجام نصوص متجاوبة (responsive text sizes).

<link rel="stylesheet" href="styles.css">

<h1>عنوان متجاوب</h1>
<p>يتناسب حجم العنوان h1 مع عرض إطار العرض (viewport).</p>
            

h1 {
font-size: 5vw;
}
            

معاينة:

سيؤدي هذا إلى ضبط حجم الخط (font size) لعناصر h1 ليصبح مساويًا لـ 5% من عرض إطار العرض (viewport)، مما يسمح للنص بالتكيف بسلاسة مع حجم نافذة المتصفح.

تتمثل إحدى مزايا وحدات القياس vh وvw في أنها تستجيب لتغيرات حجم إطار العرض (viewport) بشكل فوري. وهذا يعني أنه إذا قام المستخدم بتغيير حجم نافذة المتصفح، فإن العناصر التي تم تحديد أبعادها باستخدام هذه الوحدات ستتكيف تلقائيًا دون الحاجة إلى إعادة تحميل الصفحة. ومع ذلك، ينبغي استخدام هذه الوحدات بحذر؛ فعلى سبيل المثال، إذا تم ضبط أحجام الخطوط باستخدام وحدات vw فقط، فقد يصبح النص صغيرًا للغاية على الشاشات الضيقة، أو كبيرًا جدًا على الشاشات العريضة.

هناك اعتبار آخر، وهو أن ارتفاع منطقة العرض (viewport) على الأجهزة المحمولة قد يتغير عند ظهور شريط عنوان المتصفح أو اختفائه؛ مما قد يؤدي إلى تغيرات غير متوقعة في التنسيق إذا كنت تعتمد بشكل مكثف على وحدات القياس vh.

خلاصة القول، تُعد وحدتا vh و vw أدوات فعالة لإنشاء تخطيطات وعناصر مرنة (responsive layouts and elements) تتكيف مع حجم نافذة العرض (viewport). وهي مفيدة بشكل خاص عند تصميم أقسام تشغل الشاشة بالكامل (full-screen sections)، أو الحفاظ على نسب أبعاد محددة، أو ابتكار تصاميم تتوسع وتتقلص بسلاسة. ومع ذلك، ينبغي استخدامها بذكاء - وغالباً بالاقتران مع تقنيات CSS أخرى - لضمان تقديم أفضل تجربة للمستخدم عبر جميع الأجهزة.