CSS Academy · درس

وحدات نافذة العرض: vw وvh وdvh

غيّر حجم العناصر نسبةً إلى نافذة عرض المتصفح باستخدام vw وvh ووحدات dvh الحديثة.

وحدات نافذة العرض: vw وvh وdvh درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

ما وحدات إطار العرض؟

ترتبط وحدات إطار العرض بحجم إطار عرض المتصفح، أي المساحة المرئية من نافذة المتصفح. وهي تتيح إنشاء تخطيطات وخطوط تتدرج مع مساحة الشاشة المتاحة.

vw — عرض إطار العرض

تساوي 1vw نسبة 1% من عرض إطار العرض. وتملأ 100vw عرض إطار العرض بالكامل. وهي مفيدة للعناصر كاملة العرض من دون التعقيدات المرتبطة بالنسب المئوية.

<div class="hero"></div>

vh — ارتفاع إطار العرض

تساوي 1vh نسبة 1% من ارتفاع إطار العرض. ويملأ 100vh ارتفاع إطار العرض بالكامل. وتُستخدم تقليديًا لأقسام الواجهة الرئيسية والنوافذ modal التي تملأ الشاشة.

<div class="fullscreen">100vh fills the viewport height</div>

مشكلة 100vh على الأجهزة المحمولة

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

dvh — ارتفاع إطار العرض الديناميكي

تتحدث dvh (dynamic viewport height) ديناميكيًا لتعكس الارتفاع المرئي الفعلي بعد ضبط واجهة المتصفح. وهي تحل مشكلة 100vh على الأجهزة المحمولة.

<div class="mobile-hero">Dynamic viewport height (100dvh)</div>

svh وlvh

توفر CSS أيضًا svh (ارتفاع إطار العرض الصغير، ويستبعد واجهة المتصفح دائمًا) وlvh (ارتفاع إطار العرض الكبير، كما لو كانت الواجهة مخفية). ويتيح ذلك تحكمًا دقيقًا في سلوك إطار العرض على الأجهزة المحمولة.

الخطوط المرنة باستخدام vw

يؤدي استخدام vw مع font-size إلى إنشاء نص يتدرج مع الشاشة:

<h1>Fluid Heading</h1>

قيود عرض إطار العرض

تتضمن 100vw عرض شريط التمرير على أجهزة سطح المكتب. وقد يسبب ذلك تجاوزًا أفقيًا إذا استُخدمت بلا حذر. ويُفضَّل استخدام width: 100% مع العناصر على مستوى الكتلة، مع حصر استخدام vw في الحالات المحددة.

vmin وvmax

تساوي 1vmin نسبة 1% من بُعد إطار العرض الأصغر (العرض أو الارتفاع). وتساوي 1vmax نسبة 1% من البُعد الأكبر. وهما مفيدتان للحاويات المربعة التي تتكيف مع تغيّر اتجاه الشاشة.

<div class="square"></div>

svw وlvw وdvw — متغيرات العرض

مثل متغيرات الارتفاع، توفر CSS الوحدات svw وlvw وdvw للعرض. وتُعد المتغيرات الديناميكية (dvw وdvh) الأكثر فائدة على الأجهزة المحمولة.

أنماط عملية

أنماط شائعة لوحدات إطار العرض:

min-height: 100dvh — أقسام تملأ الشاشة ومتوافقة مع الأجهزة المحمولة
height: 100svh — لوحات واجهة مستخدم ثابتة
font-size: clamp(1rem, 2.5vw, 2rem) — عناوين مرنة
width: min(800px, 90vw) — حاويات بعرض آمن

تحقّق سريع

لماذا يُفضَّل استخدام dvh بدلًا من vh للأقسام التي تملأ الشاشة على الأجهزة المحمولة؟

مراجعة

تمثل vw وvh نسبة 1% من عرض إطار العرض وارتفاعه. وتكون vh غير موثوقة على الأجهزة المحمولة بسبب واجهة المتصفح. استخدم dvh للتخطيطات التي تملأ الشاشة ديناميكيًا وبشكل دقيق على الأجهزة المحمولة. وتستجيب vmin وvmax لبُعد إطار العرض الأصغر أو الأكبر.

الأسئلة الشائعة

هل درس «وحدات نافذة العرض: vw وvh وdvh» مجاني؟

نعم — نص درس «وحدات نافذة العرض: vw وvh وdvh» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «وحدات نافذة العرض: vw وvh وdvh»؟

غيّر حجم العناصر نسبةً إلى نافذة عرض المتصفح باستخدام vw وvh ووحدات dvh الحديثة. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «وحدات نافذة العرض: vw وvh وdvh»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى CSS Academy