الدرس الرابع: التصميم المستجيب للمواقع الإلكترونية (٢)

الدرس ٢٥ من ٣٠التقنية الرقمية ٢صفحات ٢٦٠–٢٦٧

يقوم التصميم المستجيب على جعل صفحات الموقع الإلكتروني تتكيف تلقائياً مع أحجام الشاشات المختلفة سواء كانت لجهاز حاسوب أو جهاز لوحي أو هاتف ذكي. تعتمد هذه التقنية بشكل أساسي على خاصية استعلام الوسائط في صفحات التنسيق النمطية لتطبيق قواعد تنسيق معينة فقط عند استيفاء شرط محدد مثل عرض إطار الشاشة. فمثلاً يمكن كتابة قاعدة لتغيير عرض صورة معينة إلى نسبة 70% إذا كان عرض الشاشة أقل من 800 بكسل بينما تظل بحجمها العادي إذا زاد العرض عن ذلك. يتيح ذلك للمطور التحكم في عرض العناصر والصور والقوائم وتخطيطها لتظهر بشكل مناسب وواضح لجميع المستخدمين بغض النظر عن الجهاز المستخدم في التصفح.

الفكرة الأساسية

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

الشرح

استعلام الوسائط هي خاصية في صفحات التنسيق النمطية تُستخدم فقط عند استيفاء شرط محدد. يمكن وضعها داخل ملف التنسيق النمطي الخارجي أو داخلياً بين وسعي الاستعلام داخل قسم الرأس في ملف لغة ترميز النص التشغيلي. تكتب القاعدة بالصيغة التالية: @media screen and (max-width: 800px) { img { width: 70%; height: auto; } } هنا يتم تطبيق القاعدة فقط إذا كان عرض إطار الشاشة أقل من أو يساوى 800 بكسل بحيث يصبح عرض الصورة 70% مع ضبط الارتفاع تلقائياً.

مثال محلول خطوة بخطوة

أنشئ ملف تنسيق خارجي للموقع.
أضف استعلام وسائط لتنسيق الصور بحيث تتغير عند الشاشات الأقل من 900 بكسل لتصبح بنسبة عرض 50%: @media screen and (max-width: 900px) {.photos img { width: 50%; margin: 6px; } }
أضف استعلاما ثانيا لتنسيق الصور للشاشات الأقل من 700 بكسل لتصبح بنسبة عرض 100%: @media screen and (max-width: 700px) {.photos img { width: 100%; height: auto; } }
عند تصفح الموقع عبر جهاز عرضه 1100 بكسل لن تتأثر الصور لأن العرض أعلى من شروط الاستعلام. وعند تصغير النافذة إلى 700 بكسل سيتفعل الاستعلام الثاني وتتغير أبعاد الصور لتملأ الشاشة.

أخطاء شائعة

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

سؤالان للتدريب مع الإجابة

السؤال الأول: ما الوظيفة الأساسية لاستعلام الوسائط في التصميم المستجيب؟ الإجابة: تُستخدم لتطبيق تنسيقات معينة في صفحات التنسيق النمطية فقط عند استيفاء شرط محدد مثل عرض الشاشة. السؤال الثاني: كيف تتغير عناصر القائمة إذا كان عرض الشاشة أقل من 700 بكسل بناء على الدروس السابقة؟ الإجابة: تتحول عناصر القائمة من العرض الأفقي بجانب بعضها إلى العرض العمودي فوق بعضها لتناسب الشاشات الصغيرة.