شرح صفوف ومحتوى الفقرة
من أهم القواعد الذهبية في بناء واجهات الويب الاحترافية تفضيل min-height: 100vh أو min-height: 100dvh دائماً على height: 100vh الجامدة عند تصميم أقسام الترحيب الممتدة على كامل الشاشة أو الغلاف العام للصفحة!
والسبب واضح؛ فعلى الشاشات المكتبية الواسعة يملأ كلاهما طول النافذة بالجمال نفسه، لكن عندما يقلب الزائر هاتفه إلى الوضع الأفقي القصير أو يكبّر الصفحة بنسبة 150%، تحبس height: 100vh إطار القسم فتفيض العناوين والأزرار فوق القسم التالي! أما min-height: 100dvh فتغطي كامل النافذة كحد أدنى، وتتمدد للأسفل بأمان تام متى احتاج المحتوى مساحة أطول.
CSS
body {
margin: 0;
}
.welcome-screen {
min-height: 100dvh;
padding: 32px;
box-sizing: border-box;
}