84. نهج الحاسوب أولاً (max-width)

قبل أن يكتسب نهج الهاتف أولاً شعبية، كان نهج الحاسوب أولاً (Desktop-First) هو الشائع. هنا، تقوم بتعريف الأنماط لأكبر شاشة أولاً، ثم تستخدم استعلامات max-width لـ تصغير التخطيط للشاشات الأصغر.

استخدام max-width

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

css /* 1. الافتراضي (أنماط الحاسوب) / .sidebar { width: 300px; / شريط جانبي عريض على الحاسوب */ float: left; }

.main-content { margin-left: 320px; }

/* 2. نقطة انكسار الجهاز اللوحي (حتى 900 بكسل) / @media (max-width: 900px) { .sidebar { width: 200px; / انكماش الشريط الجانبي */ } }

/* 3. نقطة انكسار الهاتف (حتى 600 بكسل) / @media (max-width: 600px) { .sidebar { float: none; / إزالة التعويم / width: 100%; / أخذ العرض الكامل */ } .main-content { margin-left: 0; } }

توصية: على الرغم من أنه لا يزال يعمل، إلا أن نهج الحاسوب أولاً يتطلب إلغاء المزيد من تعريفات CSS المعقدة، مما يجعله عموماً أقل كفاءة وأصعب في الصيانة من نهج الهاتف أولاً.