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

📚 عرض إطار العرض (Viewport Width)

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

عرض إطار العرض (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%

تنسيق قسم القائمة

استخدام استعلامات الوسائط

#### لتنسيق عناصر القائمة في الأجهزة المختلفة

إضافة مقطع CSS

#### في الفئة المقابلة لملف CSS

خصائص CSS لقائمة (.menu)

#### `.menu`

##### background-color: #426C35;

##### overflow: auto;

#### `.menu ul`

##### text-align: center;

##### padding-top: 20px;

##### padding-bottom: 20px;

##### text-decoration: none;

#### `.menu li`

##### display: inline-block;

##### text-align: center;

#### `.menu li a`

##### display: inline-block;

##### height: auto;

##### width: 150px;

##### color: #333333;

##### background-color: #f5f5f5;

##### padding: 10px;

##### margin: 4px;

##### text-align: center;

##### font-size: 18px;

##### font-weight: bold;

##### text-decoration: none;

##### border-radius: 4px;

#### `.menu li a:hover`

##### background-color: #d6d599;

العرض

#### توضح عناصر القائمة أفقياً في سطر واحد

تنسيق القائمة المستجيبة

#### مثال تطبيقي: موقع كرة القدم

#### استعلام وسائط لتغيير تنسيق القائمة

##### الشرط: `@media screen and (max-width: 700px)`

###### الإجراء: `.menu li { display: block; text-align: center; }`

##### الشرح

###### يطبق عندما يكون عرض شاشة الجهاز أقل من 700 بكسل.

###### يغير عرض عناصر القائمة من أفقي (inline-block) إلى عمودي (block).

#### اختبار التصميم المستجيب

##### باستخدام بيئة محاكاة مايكروسوفت إيدج.

##### عند تصغير نافذة المتصفح (لتقليل عرض الإطار)، يتغير شكل القائمة.

##### في الإطار الواسع (مثال: 1100 بكسل)، تظهر العناصر في سطر أفقي ولا يؤثر الاستعلام.

#### تأثير عرض إطار العرض على القائمة

##### عرض إطار العرض أكبر من 700 بكسل

###### يؤثر وسم `` لإطار العرض على تنسيق القائمة.

###### عند تصغير النافذة من 1100 بكسل إلى 701 بكسل، يمكن رؤية العناصر التي سيتم نقلها في القائمة.

##### عرض إطار العرض أقل من أو يساوي 700 بكسل

###### يؤثر استعلام الوسائط على عناصر القائمة.

###### عند عرض 700 بكسل، يتم وضع عناصر القائمة في قائمة عمودية ومركزية.

###### يتم تطبيق هذا التنسيق على الأجهزة التي يبلغ عرض شاشتها 700 بكسل وأقل.

```

نقاط مهمة

• عند عرض إطار العرض أكبر من 700 بكسل، يكون لوسم `` الخاص بإطار العرض التأثير الرئيسي على تنسيق القائمة.
• عند عرض إطار العرض 700 بكسل أو أقل، يكون لاستعلامات الوسائط (Media Queries) التأثير الرئيسي، مما يغير شكل القائمة إلى قائمة عمودية مركزية.
• يمكن اختبار هذا التغيير عن طريق تصغير نافذة المتصفح وملاحظة تحول القائمة من الشكل الأفقي إلى العمودي عند الوصول إلى عرض 700 بكسل.

عرض إطار العرض (Viewport Width) أكبر من 700 بكسل.

عند تصغير عرض نافذة المتصفح من قيمة عالية مثل 1100 بكسل إلى 701 بكسل، فإن وسم <meta> لإطار العرض هو الذي يؤثر على تنسيق قائمة الموقع الإلكتروني؛ ونتيجة لذلك يمكنك رؤية العناصر التي سيتم نقلها في القائمة.

عرض إطار العرض (Viewport Width) أقل من 700 بكسل.

تصغير نافذة المتصفح بعرض 700 بكسل بالضبط، يكون لاستعلام الوسائط تأثير على عناصر القائمة. يكون التغيير مرئيًا بوضوح حيث يتم وضع عناصر القائمة في قائمة عمودية ومركزية. يتم تطبيق هذا التنسيق على الأجهزة التي يبلغ عرض شاشتها 700 بكسل وأقل.

وزارة التعليم Ministry of Education 2023 - 1447

268

عرض إطار العرض (Viewport Width) أكبر من 700 بكسل. عند تصغير عرض نافذة المتصفح من قيمة عالية مثل 1100 بكسل إلى 701 بكسل، فإن وسم <meta> لإطار العرض هو الذي يؤثر على تنسيق قائمة الموقع الإلكتروني؛ ونتيجة لذلك يمكنك رؤية العناصر التي سيتم نقلها في القائمة. عرض إطار العرض (Viewport Width) أقل من 700 بكسل. تصغير نافذة المتصفح بعرض 700 بكسل بالضبط، يكون لاستعلام الوسائط تأثير على عناصر القائمة. يكون التغيير مرئيًا بوضوح حيث يتم وضع عناصر القائمة في قائمة عمودية ومركزية. يتم تطبيق هذا التنسيق على الأجهزة التي يبلغ عرض شاشتها 700 بكسل وأقل. وزارة التعليم Ministry of Education 2023 - 1447 268 --- VISUAL CONTEXT --- **DIAGRAM**: الاستجابة بسبب وسم <meta> في إطار العرض. Description: A screenshot-like diagram of a webpage displayed at a viewport width of 701 pixels. The top bar indicates 'Dimensions: Responsive', '701 x 1300', '65%', 'No throttling'. The navigation bar is horizontal, featuring 'الصفحة الرئيسية', 'التاريخ', 'المعرض', 'نبذة', 'اتصل بنا'. Below the navigation, the main content area includes a header 'التاريخ' followed by a paragraph of text about football history. Further down, there's a header 'المعرض' and two images: a golden football trophy in a display case and a football team celebrating on a field. The diagram includes a ruler-like scale on the top and left edges. Context: Illustrates how a webpage adapts its layout, specifically the navigation bar, when the viewport width is above a certain threshold (700px), likely controlled by a <meta> viewport tag, maintaining a desktop-like horizontal navigation. **DIAGRAM**: الاستجابة بسبب استعلام الوسائط. Description: A screenshot-like diagram of a webpage displayed at a viewport width of 700 pixels. The top bar indicates 'Dimensions: Responsive', '700 x 1300', '51%', 'No throttling'. The navigation bar is vertical and positioned on the left side, featuring 'الصفحة الرئيسية', 'التاريخ', 'المعرض', 'نبذة', 'اتصل بنا'. To the right of the navigation, the main content area includes a header 'تعمل كرة القدم على جمع الناس معًا' followed by a short paragraph. Below that, there's a header 'التاريخ' with a longer paragraph about football history, and then a header 'المعرض' with an image of a golden football trophy in a display case. The diagram includes a ruler-like scale on the top and left edges. Context: Illustrates how a webpage adapts its layout, specifically the navigation bar, when the viewport width is at or below a certain threshold (700px), likely controlled by CSS media queries, switching to a mobile-like vertical navigation.