استعلام الوسائط - كتاب التقنية الرقمية - الصف 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

###### يوضع داخل قسم الوسم بين وسمي