صفحة 264 - كتاب التقنية الرقمية - الصف 11 - الفصل 1 - المملكة العربية السعودية

📚 محاكاة متصفح مايكروسوفت إيدج

المفاهيم الأساسية

محاكاة المتصفح: استخدام بيئة محاكاة (مثل مايكروسوفت إيدج) لمحاكاة الأجهزة ذات أبعاد شاشة مختلفة واختبار كيفية تغير أبعاد الصور.

استعلامات الوسائط (Media Queries): تؤثر على أبعاد الصور لعرض الشاشة الذي يساوي أو يقل عن قيمة بكسل محددة (مثل 900 بكسل).

خريطة المفاهيم

```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 بكسل

```

نقاط مهمة

• يمكن استخدام بيئة محاكاة المتصفح لاختبار كيفية استجابة الصور وأبعادها لأحجام الشاشات المختلفة.
• استعلامات الوسائط قد لا تؤثر على الصور إذا كان عرض نافذة المتصفح أكبر من القيمة المحددة في الاستعلام (مثال: عرض 1100 بكسل لا يتأثر باستعلامات لشاشات ≤ 900 بكسل).
• الغرض من المحاكاة هو رؤية التغير الفعلي في أبعاد الصور عند تغيير حجم نافذة المتصفح أو محاكاة جهاز بعرض شاشة مختلف.

استخدم بيئة محاكاة مايكروسوفت إيدج لمحاكاة الأجهزة ذات عرض الشاشة المختلف ومعرفة كيف تتغير أبعاد الصور.

في نافذة متصفح ذات عرض واسع، على سبيل المثال: 1100 بكسل، لا تتأثر الصور باستعلامي الوسائط لأنهما يؤثران على أبعاد الصور لعرض الشاشة الذي يساوي أو يقل عن 900 بكسل.

Ministry of Education 2025 - 1447

264

استخدم بيئة محاكاة مايكروسوفت إيدج لمحاكاة الأجهزة ذات عرض الشاشة المختلف ومعرفة كيف تتغير أبعاد الصور. في نافذة متصفح ذات عرض واسع، على سبيل المثال: 1100 بكسل، لا تتأثر الصور باستعلامي الوسائط لأنهما يؤثران على أبعاد الصور لعرض الشاشة الذي يساوي أو يقل عن 900 بكسل. Ministry of Education 2025 - 1447 264 --- VISUAL CONTEXT --- **DIAGRAM**: إطار عرض واسع (Wide Viewport) Description: A diagram representing a Microsoft Edge browser simulation interface, demonstrating responsive web design. The interface includes browser controls and a sample web page about football. Context: This diagram illustrates how web pages adapt to different screen sizes and how media queries affect image dimensions, relevant to web development and responsive design concepts.