Grid Layouts With Mediaدمج الشبكة مع استعلامات الوسائط
أعد تشكيل الهيكل المعماري الكامل لصفحات الويب الدلالية عبر شاشات الهاتف واللوحي والحاسوب بدمج مناطق الشبكة المسماة مع استعلامات الوسائط التصاعدية والانعكاس التلقائي لاتجاه اللغة العربية والإنجليزية.
3 صفوف تعليمية
لغة CSS
2,439 مشاهدة
شرح صفوف ومحتوى الفقرة
الصف 1
شرح توضيحي
بينما تتألق أصناف الامتداد في توزيع صفوف البطاقات، يحتاج الهيكل المعماري الكامل لصفحة الويب—المؤلف من الشريط العلوي وقائمة التنقل والمحتوى الرئيسي والشريط الجانبي والتذييل—إلى إعادة تشكيل شاملة لمواقع المناطق بين شاشة الهاتف الضيقة وشاشة الحاسوب العريضة.
يتيح دمج خاصية المناطق المسماة grid-template-areas مع استعلامات @media إعادة رسم خريطة الصفحة بأكملها من داخل الحاوية الأب وحدها؛ فتظل عناصر HTML الدلالية مرتبة في المصدر بتسلسل منطقي نظيف واحد بينما تتكفل الأنماط بإعادة توزيع المسارات والمناطق عند كل نقطة توقف.
الصف 2
صورة توضيحية
الصف 3
ملاحظة هامة
جميع فقرات هذا الدرس (صفحات متجاوبة بنظام Grid في لغة CSS)