انتقل إلى محتوى الدرس

Viewport Sizing Utilities أبعاد نافذة المتصفح vw وvh

شكّل عناصر الواجهة في بوتستراب 5.3 عبر كلاسات إضافة وحذف الحدود وألوانها وسماكتها، واستدارة الحواف والأشكال الدائرية، ونسب العرض والارتفاع وأبعاد النافذة ودرجات الظلال.
3 صفوف تعليمية
بوتستراب 5
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

عند تصميم شاشة ترحيب كاملة أو واجهة تسجيل دخول تغطي نافذة المتصفح الرأسية مهما قلّ محتواها، يوفر بوتستراب أربع أدوات مرتبطة مباشرة بأبعاد نافذة العرض Viewport: كلاسي .vw-100 و.vh-100 لضبط العرض أو الارتفاع الكامل، وكلاسي الحد الأدنى .min-vw-100 و.min-vh-100.

يُفضل هندسياً في صفحات الويب الحقيقية استخدام .min-vh-100 بدلاً من .vh-100 الصلب؛ لأنه يضمن ملء الشاشة بالكامل عندما يكون المحتوى قصيراً، وفي الوقت ذاته يسمح للصفحة بالتمدد الطبيعي للأسفل دون قصّ النصوص إذا زاد المحتوى على الهواتف الأفقية.

الصف 2 ملاحظة هامة
الصف 3 معاينة حية