الدرس الرابع: التصميم المستجيب للمواقع الإلكترونية (٣)
انظر إلى الشكلين مقارناً بينهما: في الشاشة اليمنى عندما يكون عرض إطار المتصفح أكبر من 700 بكسل، تظهر عناصر القائمة أفقياً بجانب بعضها، ويظهر وسم meta لإطار العرض بوضوح. أما في الشاشة اليسرى عندما يقل عرض إطار العرض عن 700 بكسل، يؤدي استعلام الوسائط إلى تغيير التنسيق كلياً، حيث تنتقل عناصر القائمة لتتخذ وضعاً عمودياً ومركزياً فوق بعضها البعض. هذا التغيير المرئي يحدث تماماً نتيجة تفعيل استعلام الوسائط عند انخفاض العرض إلى 700 بكسل أو أقل، مما يضمن ظهور الموقع بوضوح على الأجهزة ذات الشاشات الصغيرة.
يقوم التصميم المستجيب على جعل الموقع الإلكتروني يتكيف تلقائيا مع مقاسات الشاشات المختلفة للهواتف الذكية والأجهزة اللوحية والحواسيب. تعتمد هذه التقنية على استخدام وسم إطار العرض وضبط مقياسه ليتطابق مع عرض الشاشة، إضافة إلى استخدام استعلام الوسائط الذي يراقب عرض نافذة المتصفح وينفذ قواعد تنسيق محددة عند تجاوز حد معين بالبكسل. على سبيل المثال، إذا كان عرض الشاشة أصغر من 600 بكسل، فإن استعلام الوسائط يتدخل لتغيير لون الخلفية أو إعادة ترتيب عناصر القائمة لتصبح عمودية ومركزية، مما يضمن تجربة تصفح مريحة وواضحة للمستخدم بغض النظر عن الجهاز المستخدم.
الفكرة الأساسية
التصميم المستجيب يضمن ظهور موقعك الإلكتروني بشكل مرتب على كل الأجهزة، سواء كان المستخدم يتصفح من هاتف صغير أو حاسوب محمول. بدلاً من تصميم موقعين مختلفين، نجعل موقعا واحدا يغير شكله بناء على عرض الشاشة.
الشرح
نعتمد على عنصرين أساسيين. الأول هو وسم إطار العرض ونكتبه هكذا: <meta name="viewport" content="width=device-width, initial-scale=1.0". هذا الوسم يخبر المتصفح بأن يضبط عرض الصفحة ليطابق عرض الجهاز تماما. العنصر الثاني هو استعلام الوسائط، ونكتبه في لغة تنسيق الصفحات هكذا: @media (max-width: 600px). معناه: راقب عرض الشاشة، فإذا أصبح 600 بكسل أو أقل، نفذ الأوامر التي بداخل الأقواس لتغيير التنسيق.
مثال محلول خطوة بخطوة
لنفترض أننا نريد تغيير لون خلفية الصفحة إلى اللون الوردي الفاتح عندما تصبح الشاشة 600 بكسل أو أقل:
- نفتح وسم الأنماط الداخلية