وحدات vh و lvh و svh و dvh هي وحدات قياس للارتفاع في CSS تُستخدم لتحديد حجم العناصر بناءً على ارتفاع منطقة العرض (viewport) في المتصفح. تنتمي هذه الوحدات إلى مجموعة وحدات منطقة العرض، جنبًا إلى جنب مع وحدة vw (عرض منطقة العرض)، لكنها تختلف في كيفية حساب الارتفاع. من المهم فهم الاختلافات بينها لتصميم مواقع ويب متجاوبة، خاصة على الأجهزة المحمولة.
vh (ارتفاع منطقة العرض): في البداية، تم تعريف vh على أنها 1% من ارتفاع منطقة العرض الأصلية. ومع ذلك، على الأجهزة المحمولة، يمكن أن يتغير حجم واجهة المستخدم (UI) للمتصفح عند التمرير، مما يؤدي إلى عدم تناسق في حساب الارتفاع. حاليًا، يتم حساب vh عادةً بناءً على أكبر ارتفاع لمنطقة العرض، أي عندما يتم تصغير واجهة مستخدم المتصفح إلى الحد الأدنى. قد يتسبب هذا في تجاوز المحتوى لشاشة العرض عندما يكون حجم واجهة مستخدم المتصفح أكبر.
lvh (ارتفاع منطقة العرض الكبيرة): يتم تعريف lvh على أنها 1% من ارتفاع أكبر منطقة عرض، على غرار كيفية عمل vh حاليًا. تُعد lvh مفيدة عندما تريد أن يكون للعناصر ارتفاع يساوي دائمًا أقصى ارتفاع لمنطقة العرض، بغض النظر عن حجم واجهة مستخدم المتصفح.
svh (ارتفاع منطقة العرض الصغيرة): يتم تعريف svh على أنها 1% من ارتفاع أصغر منطقة عرض، أي عندما يتم توسيع واجهة مستخدم المتصفح إلى الحد الأقصى. تسمح لك svh بتصميم عناصر ذات ارتفاع يكفي لملء الشاشة، حتى عندما تشغل واجهة مستخدم المتصفح مساحة كبيرة. يساعد استخدام svh في تجنب إخفاء المحتوى بواسطة واجهة مستخدم المتصفح.
dvh (ارتفاع منطقة العرض الديناميكي): يتم تعريف dvh على أنها 1% من ارتفاع منطقة العرض الديناميكي، مما يعني أن الارتفاع يُحسب باستمرار بناءً على حجم منطقة العرض الحالية، حتى عند تغيير واجهة مستخدم المتصفح. على الرغم من أن dvh تبدو مثالية لملاءمة المحتوى دائمًا مع منطقة العرض، إلا أن تغيير الحجم باستمرار قد يتسبب في تجربة متقطعة للمستخدمين ويؤثر على الأداء. لذلك، يُنصح بتجنب استخدام dvh إلا عند الضرورة القصوى. قد يتسبب ذلك في حدوث قفزات في المحتوى أو تغيير حجمه بشكل مفاجئ عند تمرير المستخدم للصفحة.
باختصار، توفر وحدتي svh و lvh طريقة أكثر استقرارًا لتحديد الارتفاع بناءً على منطقة العرض، بينما يجب استخدام dvh بحذر. يعتمد اختيار الوحدة المناسبة على هدف التصميم وتجربة المستخدم المطلوبة. تحافظ lvh على الحجم ثابتًا، بينما تتقلص svh وفقًا لواجهة مستخدم المتصفح، وتتغير dvh باستمرار.