HTML & CSS • المستوى الرابع • الدرس 1

التصميم المتجاوب وقواعد Media Queries

أهداف الدرس العلمية

استيعاب مفهوم التصميم المتجاوب (Responsive Web Design) ووسم viewport.
استخدام استعلامات الوسائط @media لضبط التنسيقات حسب عرض الشاشة.
فهم نقاط التوقف الشائعة (Breakpoints) للهواتف والحواسيب.
تعديل الأحجام والتصميم للتلاؤم التلقائي مع شاشات الجوال.

1. ما هو التصميم المتجاوب ووسم Viewport؟

التصميم المتجاوب يعني جعل أبعاد ومحتويات الموقع تتغير وتتأقلم تلقائياً لتناسب شاشة الهواتف والأجهزة اللوحية والحواسيب. والخطوة الأولى دائمًا هي إدراج وسم Viewport في <head>:

html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. صياغة قواعد @media

نستخدم القاعدة @media لتطبيق شروط تنسيق معينة عندما يقل أو يزيد عرض الشاشة عن قيمة معينة (يُسمى ذلك Breakpoint):

مثال تغيير تنسيق الشاشات التي يقل عرضها عن 600px:

css

/* التنسيق الأساسي للحواسيب */
.responsive-box {
  background-color: #2563eb;
}

/* تنسيق خاص بالشاشات الصغيرة (الجوال) */
@media (max-width: 600px) {
  .responsive-box {
    background-color: #dc2626; /* تغيير اللون للأحمر */
    font-size: 14px;
  }
}

التطبيق العملي المباشر

تحدي الدرس الأول: تطبيق Media Query للشاشات الصغيرة

قم بكتابة قاعدة @media داخل عنصر <style> لتطبيق الشروط التالية:

إنشاء استعلام شرطي للشاشات التي يقل عرضها عن أو يساوي 600px باستخدام:
css
```
@media (max-width: 600px) {
  /* التنسيقات هنا */
}
```
داخل هذا الاستعلام، غيّر خلفية الصنف .responsive-box إلى اللون الأخضر: background-color: #16a34a;.

محرر الأكواد — HTML

14px

جارٍ تهيئة البيئة...

المخرجات — المخرجات

الكونسول (Console)

13px

nahda@runner — html

0 lines

(لا يوجد إخراج)

HTMLLn 33, Col 1UTF-8Spaces: 2

680 chars

فهرس المستوى الانتقال للمشروع التطبيقي النهائي