83. نهج الهاتف أولاً (min-width)

إستراتيجية الهاتف أولاً (Mobile-First) هي المعيار الحديث لتصميم الويب المتجاوب. تعني التصميم والتنسيق لأصغر شاشة (الهاتف) أولاً، ثم إضافة أنماط للشاشات الأكبر فقط عند الضرورة.

لماذا الهاتف أولاً؟

1. الأداء: تتطلب الأجهزة المحمولة CSS أولياً أقل تعقيداً، مما يؤدي إلى أوقات تحميل أسرع.
2. التحسين التدريجي: تبدأ بأبسط تخطيط ممكن وتقوم بتحسينه تدريجياً لمنافذ العرض الأوسع.

استخدام min-width

في نهج الهاتف أولاً، تستخدم min-width لتعريف نقاط الانكسار (Breakpoints). الأنماط المكتوبة خارج استعلام الوسائط تنطبق على جميع الشاشات، وتقوم استعلامات min-width بـ إلغاء تلك الأنماط كلما كبرت الشاشة.

css /* 1. الافتراضي (أنماط الهاتف) / .container { width: 90%; padding: 10px; flex-direction: column; / العناصر تتكدس عمودياً على الهاتف */ }

/* 2. نقطة انكسار الجهاز اللوحي (600 بكسل وما فوق) / @media (min-width: 600px) { .container { padding: 20px; flex-direction: row; / يتغير التخطيط إلى أفقي */ } }

/* 3. نقطة انكسار الحاسوب (1024 بكسل وما فوق) */ @media (min-width: 1024px) { .container { max-width: 1200px; margin: 0 auto; } }

ملاحظة: الأنماط في أحدث استعلام تلغي دائماً الاستعلامات السابقة في حال وجود تضارب.