تصميم متجاوب لجميع الأجهزة: CSS Media Queries وقواعد التجاوب الميدانية

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

التصميم المتجاوب (Responsive Design) ليس مجرد ميزة إضافية، بل هو صلب تطوير الويب المعاصر. عبر استعلامات الوسائط (Media Queries) يمكنك تغيير حجم الخطوط، إخفاء عناصر، أو تحويل القوائم الأفقية إلى عمودية عند حدود معينة.

في هذا الدرس سنتعلم تحديد نقاط التوقف (Breakpoints) القياسية، وكتابة أكواد استعلام وسائط نظيفة، وضبط وسم viewport لضمان المظهر المثالي.

1. تأكد أولاً من وجود وسم الـ viewport داخل : . شو رح تشوف على الشاشة: هذا الوسم يخبر متصفح الهاتف باعتماد العرض الحقيقي لشاشة الجهاز وعدم تصغير الصفحة كأنها سطح مكتب. إذا ما ظهرلك: بدون هذا الوسم، ستتجاهل متصفحات الهواتف قواعد الـ Media Queries بالكامل!
2. افتح ملف style.css وانتقل لأسفله لكتابة أول استعلام وسائط لشاشات الهواتف: @media (max-width: 768px) { ... }. شو رح تشوف على الشاشة: كتلة برمجية مخصصة تطبق الأكواد المكتوبة بداخلها فقط عندما يكون عرض الشاشة 768 بكسل أو أقل. إذا ما ظهرلك: نقطة 768px هي الحد الفاصل الكلاسيكي بين أجهزة التابلت/الهاتف وبين الحواسب.
3. حوّل شريط الترويسة في الموبايل من أفقي إلى عمودي: .nav-container { flex-direction: column; gap: 15px; }. شو رح تشوف على الشاشة: القائمة والشعار يترتبان رأسياً بشكل مريح للشاشات الضيقة بدلاً من التزاحم العرضي. إذا ما ظهرلك: تأكد من توسيط الروابط لتكون سهلة النقر بأصبع الإبهام على الموبايل.
4. اضبط أحجام العناوين الكبيرة في الموبايل لتناسب المساحة: h1 { font-size: 1.8rem; } بدلاً من الأحجام الضخمة. شو رح تشوف على الشاشة: العنوان الرئيسي يصبح متناسقاً ولا يحتل نصف شاشة الهاتف بل سطرين أو ثلاثة مقروءة. إذا ما ظهرلك: استخدام وحدات rem يضمن تناسب الخطوط مع إعدادات تكبير النصوص في أجهزة المستخدمين.
5. اجعل شبكة البطاقات عموداً واحداً صريحاً على الشاشات شديدة الصغر: @media (max-width: 480px) { .service-card { width: 100%; } }. شو رح تشوف على الشاشة: كل بطاقة تحتل العرض الكامل للموبايل مع هوامش مريحة على الجانبين. إذا ما ظهرلك: الحد 480px يغطي أغلب الهواتف الذكية الشائعة في وضع الاستخدام الرأسي.
6. اضبط هوامش الحاويات العامة في الموبايل: .container { padding: 0 15px; } لمنع التصاق النصوص بحواف الشاشة. شو رح تشوف على الشاشة: هوامش تنفس جانبية متساوية على اليمين واليسار تحافظ على جمالية الصفحة. إذا ما ظهرلك: الالتصاق بحافة الشاشة يعطي إحساساً رديئاً وغير مصقول للتصميم.
7. افتح نافذة أدوات المطور (F12) واختر أجهزة متعددة من القائمة العلوية (iPhone, Galaxy, iPad). شو رح تشوف على الشاشة: المتصفح يعرض محاكاة دقيقة لشاشات الهواتف المختلفة بدقة أبعادها وأزرار لمسها. إذا ما ظهرلك: جرب قلب الجهاز لوضع العرض الأفقي (Landscape) للتأكد من عدم حدوث أي تشوه.
8. افحص سرعة استجابة العناصر وتأكد من أن جميع الأزرار والروابط تملك مساحة لمس (Tap Target) لا تقل عن 40 بكسل. شو رح تشوف على الشاشة: أزرار سهلة النقر لا تتداخل مع الروابط المجاورة وتمنع النقرات الخاطئة. إذا ما ظهرلك: سهولة النقر بإبهام اليد الواحدة هي المعيار الأهم في تجربة مستخدم الموبايل (UX).