استعلامات الوسائط
استعلامات الوسائط (Media Queries) هي تقنية متقدمة في CSS تُستخدم لتصميم صفحات ويب تتكيف مع أحجام الشاشات المختلفة، مثل الهواتف الذكية، الأجهزة اللوحية، وشاشات الكمبيوتر المكتبية. يمكننا تشبيهها بعملية تصميم غرفة في المنزل: إذا كان لديك غرفة صغيرة تحتاج إلى أثاث مضغوط وموزع بعناية، وإذا كانت الغرفة كبيرة يمكنك استخدام قطع أثاث أكبر وألوان مختلفة. استعلامات الوسائط تعمل بنفس الطريقة، فهي تسمح لك بتغيير تصميم الموقع استنادًا إلى حجم الشاشة أو نوع الجهاز أو دقة العرض.
تطبيق استعلامات الوسائط مهم جدًا لمواقع الأخبار، حيث يحتاج المحتوى لأن يكون قابلاً للقراءة على جميع الأجهزة، أو لمواقع التجارة الإلكترونية التي تحتاج لعرض المنتجات بطريقة جذابة على الهواتف المحمولة دون فقدان التفاصيل، وكذلك للصفحات الشخصية أو البوابات الحكومية التي تتطلب عرضًا واضحًا ومرتبًا للبيانات. باستخدام استعلامات الوسائط، ستتعلم كيفية تعديل التخطيطات (Layout)، الأحجام، الألوان، وحتى بعض خصائص النصوص لتلبية تجربة المستخدم الأمثل.
خلال هذا الدرس، ستتعلم كيفية كتابة استعلامات وسائط بسيطة ومعقدة، فهم كيفية تحديد شروط العرض المختلفة (مثل min-width وmax-width)، وإدماجها في مشروع حقيقي. سنركز على التفاعل العملي، بحيث يمكن للمطورين الجدد أو ذوي الخبرة توظيف هذه التقنية بكفاءة. تمامًا كما تنظم مكتبة كبيرة لتسهيل الوصول إلى الكتب، استعلامات الوسائط تساعدك على تنظيم العناصر بشكل ديناميكي ومرن عبر جميع الأجهزة.
مثال أساسي
css/* مثال أساسي لاستعلام وسائط */
body {
font-size: 16px; /* حجم الخط الافتراضي */
background-color: #f0f0f0; /* لون الخلفية الافتراضي */
}
/* إذا كانت شاشة العرض أقل من 768px */
@media (max-width: 768px) {
body {
font-size: 14px; /* تصغير حجم الخط للأجهزة الصغيرة */
background-color: #e0e0e0; /* تغيير الخلفية لتناسب الشاشة الصغيرة */
}
}في هذا المثال، بدأنا بتحديد خصائص CSS افتراضية للجسم (body) مثل حجم الخط ولون الخلفية. هذه القيم تعمل على جميع الأجهزة بشكل أساسي. بعد ذلك، استخدمنا استعلام الوسائط @media مع الخاصية max-width لتحديد أن هذه القواعد الجديدة ستُطبق فقط على الشاشات التي يبلغ عرضها 768 بكسل أو أقل.
الخاصية max-width تعني "أقصى عرض"، أي أن الاستعلام سيفعل نفسه عندما يكون عرض الشاشة مساويًا أو أقل من 768px. ضمن الاستعلام، قمنا بتغيير حجم الخط ولون الخلفية. هذا المثال يُظهر المبدأ الأساسي للاستعلامات: القدرة على تعديل خصائص CSS استنادًا إلى شروط محددة.
بالنسبة لمواقع الأخبار أو التجارة الإلكترونية، يمكن استخدام هذا النهج لضبط الأعمدة، الصور، وحتى قوائم التنقل لتصبح أكثر مرونة على الأجهزة الصغيرة. أيضًا، يمكن تعديل أحجام الأزرار أو المسافات لتسهيل التفاعل مع اللمس. بالنسبة للصفحات الحكومية أو الشخصية، يُستخدم لضمان وضوح النصوص والمحتوى دون تشويه أو قطع. استعلامات الوسائط توفر وسيلة للحفاظ على تجربة المستخدم سلسة ومرنة، كما لو كنت تقوم بتزيين غرفة بحسب حجمها وأثاثها.
مثال عملي
css/* مثال عملي لموقع إخباري */
.container {
display: grid; /* استخدام الشبكة لتخطيط المحتوى */
grid-template-columns: repeat(3, 1fr); /* ثلاث أعمدة متساوية */
gap: 20px; /* مسافة بين العناصر */
}
.article {
background-color: #ffffff;
padding: 15px;
border-radius: 8px;
}
/* استعلام وسائط للأجهزة اللوحية */
@media (max-width: 1024px) {
.container {
grid-template-columns: repeat(2, 1fr); /* عمودان بدلاً من ثلاثة */
}
}
/* استعلام وسائط للهواتف المحمولة */
@media (max-width: 600px) {
.container {
grid-template-columns: 1fr; /* عمود واحد لكل المقالات */
}
}في هذا المثال العملي، أنشأنا تخطيطًا لشبكة تحتوي على ثلاثة أعمدة لموقع إخباري. العناصر داخل الشبكة عبارة عن مقالات (article) مصممة بشكل جذاب مع خلفية بيضاء ومسافة داخلية وحواف مستديرة.
استعلام الوسائط الأول يستهدف الأجهزة اللوحية بعرض أقل من 1024 بكسل، حيث قمنا بتغيير التخطيط من ثلاثة أعمدة إلى عمودين. هذا يجعل القراءة أسهل دون الحاجة إلى التكبير أو التمرير الأفقي. الاستعلام الثاني يستهدف الهواتف المحمولة بعرض أقل من 600 بكسل، حيث يصبح التخطيط عمودًا واحدًا، مما يحسن تجربة التصفح على شاشات صغيرة جدًا.
باستخدام هذه التقنية، يمكن التحكم في تخطيط الموقع بالكامل بطريقة ديناميكية، مع الحفاظ على تنظيم العناصر والمحتوى. هذا النهج عملي جدًا لمواقع الأخبار والتجارة الإلكترونية، حيث يحتاج المحتوى للتكيف مع أجهزة متعددة دون التأثير على تجربة المستخدم أو وضوح المعلومات.
أفضل الممارسات تشمل التصميم وفق مبدأ Mobile-First، أي البدء بتصميم للهواتف أولًا ثم التوسع للأجهزة الأكبر، هذا يحسن الأداء ويجعل الكود أكثر صيانة. يجب أيضًا تقليل عدد استعلامات الوسائط المتكررة لتجنب تعقيد الكود وارتفاع وقت التحميل. استخدام أسماء فئات واضحة ومنطقية يساعد على تقليل تعارض الخصائص (Specificity Conflicts).
الأخطاء الشائعة تشمل تجاهل الأحجام الصغيرة، مما يؤدي لتجربة مستخدم سيئة، استخدام استعلامات غير محددة جيدًا قد تسبب تداخل القواعد، وتجاوزات متكررة (overrides) التي تزيد من صعوبة الصيانة. أثناء تصحيح الأخطاء، من المهم استخدام أدوات المطورين في المتصفح لمعاينة تأثير الاستعلامات على مختلف الشاشات والتحقق من ترتيب تطبيق القواعد.
ينصح بالبدء بخطة واضحة للتخطيط المتجاوب (Responsive Layout) وتحديد نقاط الانكسار (breakpoints) بشكل منطقي بناءً على المحتوى والجمهور المستهدف، مع اختبار التفاعل على مختلف الأجهزة لتجنب أي مشكلات في الأداء أو التصميم.
📊 مرجع سريع
| Property/Method | Description | Example |
|---|---|---|
| @media | تعريف استعلام وسائط جديد | @media (max-width: 768px) { ... } |
| min-width | max-width | تحديد نطاق العرض لتطبيق القواعد |
| orientation | تحديد اتجاه الجهاز | @media (orientation: landscape) { ... } |
| hover | تطبيق قواعد عند وجود مؤشر | @media (hover: hover) { ... } |
| pointer | تحديد نوع مؤشر الإدخال | @media (pointer: coarse) { ... } |
في نهاية هذا الدرس، نلخص أن استعلامات الوسائط تمكّن المصممين من بناء مواقع مرنة تتكيف مع أحجام الشاشات المختلفة، مما يحسن تجربة المستخدم بشكل كبير. تعلمت كيفية استخدام @media لتحديد القواعد الخاصة بالشاشات الصغيرة والمتوسطة والكبيرة، وكيفية ضبط التخطيطات والألوان وحجم النصوص ديناميكيًا.
هذه التقنية ترتبط بشكل وثيق ببنية HTML، حيث يجب تنظيم العناصر بشكل منطقي لتسهيل تطبيق الاستعلامات. كما يمكن دمجها مع JavaScript لتطبيق تغييرات ديناميكية أكثر تعقيدًا، مثل تغيير المحتوى أو العناصر بناءً على حجم الشاشة أو نوع الجهاز.
الخطوة التالية هي دراسة CSS Grid وFlexbox المتقدمة مع استعلامات الوسائط، وتعلم كيفية بناء مواقع متجاوبة مع واجهات تفاعلية. ينصح بالاستمرار في الممارسة العملية عبر مشاريع صغيرة أو تحسين مواقع قائمة، مع التركيز على تجربة المستخدم على جميع الأجهزة، لضمان إتقان هذه المهارة الحيوية.
🧠 اختبر معرفتك
اختبر معرفتك
اختبر فهمك لهذا الموضوع بأسئلة عملية.
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى