📚 معلومات الصفحة
الكتاب: كتاب التقنية الرقمية - الصف 11 - الفصل 1 | المادة: التقنية الرقمية | المرحلة: الصف 11 | الفصل الدراسي: 1
الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم
نوع المحتوى: درس تعليمي
📝 ملخص الصفحة
📚 استعلام الوسائط (Media Query)
المفاهيم الأساسية
استعلام الوسائط (Media Query): خاصية في صفحات التنسيق النمطية (CSS) تُستخدم فقط عند استيفاء شرط محدد.
خريطة المفاهيم
```markmap
تصميم الموقع الإلكتروني
أنواع CSS
صفحات الأنماط المضمنة (Inline style)
صفحات الأنماط الداخلية (Internal style sheets)
صفحات الأنماط الخارجية (External style sheets)
تنظيم HTML
استخدام وسم ودالة class
محددات CSS
محدد Class (.)
#### استخدام النقطة (.) قبل اسم class
#### مثال: تنسيق قسم menu class
خصائص نموذج الصندوق (Box-Model)
الإطار (Border)
#### حدود تفصل بين حافة كل صندوق عن الآخر
الهامش (Margin)
#### المساحة خارج حدود الإطار
الفراغ (Padding)
#### المسافة ما بين الإطار والمحتوى
الموقع الإلكتروني المستجيب
تعريف
#### أسلوب تصميم يستجيب لخصائص الجهاز والمستخدم
مزايا
#### تحسين تجربة المستخدم
##### يتكيف مع حجم الشاشة المختلفة
##### يوفر تجربة تصفح سهلة وممتعة
#### سهولة التحديث
##### تحديث موقع واحد فقط بدلاً من مواقع متعددة
#### توفير المال
##### إنشاء موقع واحد يناسب جميع المستخدمين بدلاً من مواقع منفصلة
التصميم المستجيب
#### الأدوات
##### شبكة تخطيطية (Schematic Grid)
##### النسب المئوية للصورة
##### إطار العرض ميتا (Meta Viewport)
##### استعلامات الوسائط (Media Queries)
#### إطار العرض (Viewport)
##### التنفيذ القياسي
###### ``
###### العرض يضبط وفقًا لعرض الجهاز
###### مستوى التكبير الأولي هو 100%
###### النتيجة: صفحة مستجيبة سهلة القراءة على الهاتف (كما في الشكل 1)
##### بدون وسم إطار العرض
###### تعرض الصفحات بعرض قياسي لشاشة الحاسب
###### يتم تصغيرها لتلائم شاشة الهاتف
###### يحتاج المستخدم إلى تكبير الصفحة للتصفح
###### النتيجة: صفحة غير مستجيبة، نص وصور صغيرة جدًا (كما في الشكل 2)
#### استعلامات الوسائط (Media Queries)
##### تعريف
###### خاصية في CSS تُستخدم فقط عند استيفاء شرط محدد
##### أماكن الاستخدام
###### داخل ملف HTML (CSS الداخلي)
###### داخل ملف CSS خارجي
##### استعلام الوسائط الداخلي في ملف HTML
###### يوضع داخل قسم الوسم
بين وسمي
محددات CSS
محدد Class (.)
#### استخدام النقطة (.) قبل اسم class
#### مثال: تنسيق قسم menu class
خصائص نموذج الصندوق (Box-Model)
الإطار (Border)
#### حدود تفصل بين حافة كل صندوق عن الآخر
الهامش (Margin)
#### المساحة خارج حدود الإطار
الفراغ (Padding)
#### المسافة ما بين الإطار والمحتوى
الموقع الإلكتروني المستجيب
تعريف
#### أسلوب تصميم يستجيب لخصائص الجهاز والمستخدم
مزايا
#### تحسين تجربة المستخدم
##### يتكيف مع حجم الشاشة المختلفة
##### يوفر تجربة تصفح سهلة وممتعة
#### سهولة التحديث
##### تحديث موقع واحد فقط بدلاً من مواقع متعددة
#### توفير المال
##### إنشاء موقع واحد يناسب جميع المستخدمين بدلاً من مواقع منفصلة
التصميم المستجيب
#### الأدوات
##### شبكة تخطيطية (Schematic Grid)
##### النسب المئوية للصورة
##### إطار العرض ميتا (Meta Viewport)
##### استعلامات الوسائط (Media Queries)
#### إطار العرض (Viewport)
##### التنفيذ القياسي
###### ``
###### العرض يضبط وفقًا لعرض الجهاز
###### مستوى التكبير الأولي هو 100%
###### النتيجة: صفحة مستجيبة سهلة القراءة على الهاتف (كما في الشكل 1)
##### بدون وسم إطار العرض
###### تعرض الصفحات بعرض قياسي لشاشة الحاسب
###### يتم تصغيرها لتلائم شاشة الهاتف
###### يحتاج المستخدم إلى تكبير الصفحة للتصفح
###### النتيجة: صفحة غير مستجيبة، نص وصور صغيرة جدًا (كما في الشكل 2)
#### استعلامات الوسائط (Media Queries)
##### تعريف
###### خاصية في CSS تُستخدم فقط عند استيفاء شرط محدد
##### أماكن الاستخدام
###### داخل ملف HTML (CSS الداخلي)
###### داخل ملف CSS خارجي
##### استعلام الوسائط الداخلي في ملف HTML
###### يوضع داخل قسم الوسم
بين وسمي