التصميم المتجاوب: موقع يعمل على الهاتف والكمبيوتر

أكثر من نصف زوار المواقع العربية من الهاتف، وجوجل يقيّم صفحتك بنسخة الهاتف أولًا. التصميم المتجاوب لم يعد خيارًا.

الخطوة صفر: وسم viewport

بدونه يعرض الهاتف الصفحة مصغرة كأنها شاشة كمبيوتر:

<meta name="viewport" content="width=device-width, initial-scale=1">

استعلامات الوسائط (Media Queries)

تطبق أنماطًا حسب عرض الشاشة:

مبدأ «الهاتف أولًا» (Mobile First)

اكتب التنسيق للهاتف أولًا، ثم أضف للشاشات الأكبر بـ min-width:

.cards { display: grid; gap: 12px; }                   /* الهاتف: عمود واحد */
@media (min-width: 640px)  { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(4, 1fr); } }

الكود أبسط، والهاتف لا يحمّل تنسيقات لا يحتاجها.

الصور المرنة

img { max-width: 100%; height: auto; }

سطر واحد يمنع الصور من الخروج عن الشاشة. واحتفظ بـ width وheight في HTML لمنع قفز الصفحة.

أحجام مرنة بـ clamp

clamp(أصغر، مفضل، أكبر) يجعل العنوان يتدرج بسلاسة دون media queries كثيرة.

قائمة تنقل تتحول على الهاتف

قائمة فحص لموقع صديق للهاتف

• وسم viewport موجود.
• لا يوجد تمرير أفقي في أي عرض.
• الأزرار والروابط بحجم إصبع: 44px تقريبًا على الأقل.
• حجم النص 16px على الأقل في الهاتف.
• الصور max-width: 100%.
• النماذج تستخدم type الصحيح لتظهر لوحة المفاتيح المناسبة.

الأسئلة الشائعة

الخلاصة

• viewport أولًا، ثم media queries.
• اكتب للهاتف أولًا ثم وسّع بـ min-width.
• صور مرنة، وclamp وmin للأحجام، وأزرار بحجم الإصبع.