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

Grid Layouts With Media دمج الشبكة مع استعلامات الوسائط

أعد تشكيل الهيكل المعماري الكامل لصفحات الويب الدلالية عبر شاشات الهاتف واللوحي والحاسوب بدمج مناطق الشبكة المسماة مع استعلامات الوسائط التصاعدية والانعكاس التلقائي لاتجاه اللغة العربية والإنجليزية.
3 صفوف تعليمية
لغة CSS
2,439 مشاهدة

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

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

بينما تتألق أصناف الامتداد في توزيع صفوف البطاقات، يحتاج الهيكل المعماري الكامل لصفحة الويب—المؤلف من الشريط العلوي وقائمة التنقل والمحتوى الرئيسي والشريط الجانبي والتذييل—إلى إعادة تشكيل شاملة لمواقع المناطق بين شاشة الهاتف الضيقة وشاشة الحاسوب العريضة.

يتيح دمج خاصية المناطق المسماة grid-template-areas مع استعلامات @media إعادة رسم خريطة الصفحة بأكملها من داخل الحاوية الأب وحدها؛ فتظل عناصر HTML الدلالية مرتبة في المصدر بتسلسل منطقي نظيف واحد بينما تتكفل الأنماط بإعادة توزيع المسارات والمناطق عند كل نقطة توقف.

الصف 2 صورة توضيحية
مخطط يوضح تحول خريطة المناطق المسماة من عمود رأسي للهاتف إلى عمودين للوحي وثلاثة أعمدة للحاسوب مع انعكاس الاتجاه
الصف 3 ملاحظة هامة