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

Responsive Viewport Rules Summary خلاصة إعدادات نافذة العرض

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

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

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

اعتمد جدول المراجعة القياسي التالي في كل صفحة ويب تبنيها قبل الانتقال إلى كتابة استعلامات الوسائط الشرطية:

الإعداد أو الوحدةالقاعدة القياسية المعتمدةالأثر الهندسي والعملي
width=device-widthإلزامي في وسم viewportيطابق عرض التخطيط مع العرض المنطقي الحقيقي للجهاز
initial-scale=1.0يقترن دائماً بعرض الجهازيفتح الصفحة بحجم طبيعي واضح دون تصغير وهمي
user-scalable=noممنوع تماماً في الإنتاجيمنع ضعاف البصر من التكبير ويخالف معايير الوصول
width: 100% بدل 100vwالخيار الآمن للحاويات الكاملةيمنع ظهور شريط تمرير أفقي بسبب عرض شريط التمرير الرأسي
min-height: 100dvhأفضل من height: 100vh الجامدةيتكيف بسلاسة مع انزلاق شريط عنوان متصفح الهاتف
الصف 2 ملاحظة هامة
خلاصة المعرفة ومحطة الانتقال

ملخص الدرس

حصاد الدرس

مراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي

ماذا تعلّمت في هذا الدرس؟

في ملخص الدرس أتقنت ضبط وسم نافذة العرض القياسي داخل رأس المستند، وفهمت الفرق بين البكسل المنطقي والفيزيائي ووحدة dvh وأهمية الحفاظ على حرية التكبير؛ وفي الخطوة التالية سننتقل إلى درس نظام Media Queries في لغة CSS لتطبيق القواعد الشرطية باحترافية عبر مختلف مقاسات الشاشات.