📚 معلومات الصفحة
الكتاب: كتاب التقنية الرقمية - الصف 11 - الفصل 1 | المادة: التقنية الرقمية | المرحلة: الصف 11 | الفصل الدراسي: 1
الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم
نوع المحتوى: درس تعليمي
📝 ملخص الصفحة
📚 تنسيق استجابة الوسائط
المفاهيم الأساسية
عرض إطار العرض (Viewport Width): عرض نافذة المتصفح أو الشاشة، ويقاس بالبكسل.
خريطة المفاهيم
```markmap
تصميم الموقع الإلكتروني
أنواع CSS
صفحات الأنماط المضمنة (Inline style)
صفحات الأنماط الداخلية (Internal style sheets)
صفحات الأنماط الخارجية (External style sheets)
الموقع الإلكتروني المستجيب
التصميم المستجيب
#### الأدوات
##### استعلامات الوسائط (Media Queries)
###### أماكن الاستخدام
####### داخل ملف HTML (CSS الداخلي)
####### داخل ملف CSS خارجي
######### استعلام الوسائط في ملف CSS خارجي
######## يوضع في نهاية ملف CSS
######## مثال تطبيقي
######### الشرط: `@media screen and (max-width: 800px)`
######### الإجراء: `img { width: 70%; height: auto; }`
######## الشرح
######### يعمل على الأجهزة التي يصل عرض إطار العرض (Viewport Width) إلى 800 بكسل
######### يتم تصغير عرض الصورة إلى 70% إذا تغير ارتفاع الصورة تلقائياً
######### يؤثر في أبعاد الصور التي يقل عرضها عن 800 بكسل
######## تنسيق الصور باستخدام استعلامات الوسائط
######### الشرط: `@media screen and (max-width: 900px)`
########## الإجراء: `img { width:50%; margin: 6px; }`
######### الشرط: `@media screen and (max-width: 700px)`
########## الإجراء: `img { width:100%; height: auto; }`
######## خطوات التطبيق
########## 1. إضافة استعلامات الوسائط في ملف CSS
########## 2. تنسيق العناصر في فئة محددة (Class)
########## 3. حفظ ملف CSS وفتح الصفحة في المتصفح
########## 4. تغيير حجم نافذة المتصفح لرؤية تغير أبعاد الصور
######### اختبار التصميم المستجيب
########## محاكاة المتصفح
############ بيئة محاكاة مايكروسوفت إيدج
############ الغرض: محاكاة الأجهزة ذات عرض الشاشة المختلف ومعرفة كيف تتغير أبعاد الصور
############ مثال: في نافذة متصفح بعرض 1100 بكسل، لا تتأثر الصور باستعلامي الوسائط المؤثرين على الشاشات ≤ 900 بكسل
########## تأثير استعلامات الوسائط عند عرض إطار عرض محدد
############ عرض 700 بكسل
############# يتم تطبيق الاستعلام على الأجهزة بعرض شاشة 700 بكسل وأقل (حتى 701 بكسل)
############# يقل مقياس عرض الصور إلى 50%
############ عرض 900 بكسل
############# يتم تطبيق الاستعلام على الأجهزة بعرض شاشة 900 بكسل وأقل (حتى 701 بكسل)
############# يقل مقياس عرض الصور إلى 50%
```
نقاط مهمة
- عند تصغير نافذة المتصفح إلى عرض 700 بكسل أو 900 بكسل، يؤثر استعلام الوسائط الأول على صور الموقع.
- التغيير يكون واضحاً، حيث يقل عرض الصور إلى 50% من حجمها.
- تحاكي نافذة المتصفح في هذا النطاق تنسيق الصور للأجهزة ذات عرض الشاشة المقابل.
📋 المحتوى المنظم
📖 محتوى تعليمي مفصّل
عرض إطار العرض (Viewport Width)
نوع: محتوى تعليمي
نوع: محتوى تعليمي
عرض إطار العرض (Viewport Width)
نوع: محتوى تعليمي
نوع: محتوى تعليمي
تعمل كرة القدم على جمع الناس معًا
نوع: محتوى تعليمي
التاريخ
نوع: محتوى تعليمي
المعرض
نوع: محتوى تعليمي
نوع: محتوى تعليمي
🔍 عناصر مرئية
صورة لكأس العالم لكرة القدم معروضة داخل خزانة زجاجية.
صورة لفريق كرة قدم يرتدي الزي الأخضر ويقفون في صف لالتقاط صورة جماعية.