انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #4 من درس: نافذة عرض المستخدم في لغة CSS

Fitting Content to Viewport ضبط المحتوى داخل حدود النافذة

اضبط وسم نافذة العرض القياسي لبناء صفحات CSS متجاوبة وميّز بين البكسل المنطقي والفيزيائي واستخدم وحدات النافذة الحديثة مع الحفاظ على إمكانية التكبير.
3 صفوف تعليمية
لغة CSS
5,168 مشاهدة

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

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

يمثل وضع وسم نافذة العرض نصف المعادلة فقط؛ فإذا تركت داخل جسم الصفحة صورة أو بطاقة وحيدة بعرض ثابت كبير مثل 700px، سيضطر متصفح الهاتف لتوسيع الصفحة أفقياً وظهور شريط تمرير يفسد التجربة.

اضمن بقاء كافة العناصر داخل حدود النافذة بالالتزام بثلاثية الحماية: تفعيل box-sizing: border-box، وبناء الحاويات بـ width: 100% مع max-width، وتقييد الصور بـ max-width: 100%.

الصف 2 كود برمجي
CSS 
.viewport-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 540px;
  padding: 16px;
}
.banner-image {
  max-width: 100%;
  height: auto;
}
جرّب بنفسك
الصف 3 معاينة حية

جميع فقرات هذا الدرس (نافذة عرض المستخدم في لغة CSS)