شارك هذا المقال:
هل سمعت سابقاً بمصطلح media query وترغب في معرفة المزيد عنه ؟
هل تعلمت HTML وCSS فقط وترغب في جعل موقعك متجاوباً مع جميع الشاشات؟
هل تريد أن تطبع صفحة ويب بألوان محددة غير الألوان الموجودة عند التصفح؟
هل تريد تطبيق تصميم محدد على عناصر HTML في شاشات معينة دون غيرها؟
هل ترغب في جعل موقعك متجاوباً بدون استخدام إطار عمل من bootstrap وغيره؟
بالطبع بإمكانك ذلك وبمنتهى البساطة باستخدام media query التي تسمح لمحتوى صفحة الويب بالتكيف مع نوع الوسائط التي يتم تقديم الصفحة بها مثل جهاز الكمبيوتر أو شاشة الهاتف أو الجهاز اللوحي
تتكون تعليمة الmedia query من نوع الوسائط وتعبير يتحقق من شروط معينة والصيغة العامة لها:
حيث أن الmedia-type ممكن أن تكون print, screen, all.
أما الexpression فهو الكود الذي نستهدف من خلاله شاشات معينة دون غيرها مثلاً نحدد طول معين أو عرض معين...
دعونا نبدأ ببعض الأمثلة لإيضاح أكبر للفكرة
بفرض أن لدينا صفحة الويب البسيطة هذه:
كود الصفحة بسيط جداً وهو على الشكل التالي:
بفرض أننا نريد جعل قياس كل من left_section وright_section هو 100% في الشاشات التي قياسها أصغر من 767px نكتب الكود بالشكل التالي:
نلاحظ أنه عند تصغير الشاشة لقياس أصغر من 767px تصبح صفحة الويب بالشكل:
هل لاحظتم مدى سهولة الأمر وببساطته؟؟
إن التعبير max-width:767px يعني أن قواعد الCSS الموجودة هنا يتم تنفيذها فقط في حال كان قياس الشاشة هو أصغر من 767px
بفرض أننا نريد تغيير اللون ليصبح رمادياً فقط إذا كان قياس الشاشة أصغر من 1200px وأكبرمن 767px نكتب الكود التالي:
وتظهر صفحة الويب عندما يكون قياس الشاشة بين 767px و1200px كالتالي:
الآن بفرض أننا نريد أن يكون اللون أسود إذا كان ارتفاع الشاشة 360px أو أقل نكتب الكود كالتالي:
وتظهر النتيجة كالتالي:
في حال كان ارتفاع الشاشة أصغر من 360px.
باستخدام القواعد السابقة سيكون من السهل جعل موقعك متجاوباً وحتى تغيير كامل التصميم حسب الشاشة التي يتصفح منها المستخدم...أرجو ان تكون المقالة مفيدة لكم ويمكنكم طرح أي استفسار في موقع نقرة فنحن موجودون دائماً لمساعدتكم..
