Media Queries للتصميم المتجاوب — تصميم CSS

التصميم المتجاوب و Media Queries

أغلب زوار المواقع اليوم على الجوال. التصميم المتجاوب يعني صفحة واحدة تتكيف مع كل الشاشات.

الشروط الأساسية

1. <meta name="viewport" content="width=device-width, initial-scale=1"> في HTML (بدونه لا شيء يعمل).

2. تخطيط مرن: نسب، max-width، Flexbox و Grid بدل العروض الثابتة.

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

4. Media Queries للتغييرات التي لا تكفيها المرونة.

الصيغة

@media (min-width: 768px) {
    .cards { grid-template-columns: repeat(2, 1fr); }
}

"طبّق هذه القواعد إذا كان عرض النافذة 768px أو أكثر".

Mobile-First: ابدأ بالجوال

اكتب التنسيق الأساسي للشاشة الصغيرة، ثم أضف للكبيرة بـ min-width:

/* الأساس: الجوال — عمود واحد */
.layout { display: grid; gap: 16px; }

/* الأجهزة اللوحية فأكبر */
@media (min-width: 768px) {
    .layout { grid-template-columns: 220px 1fr; }
}

/* الشاشات الكبيرة */
@media (min-width: 1200px) {
    .layout { grid-template-columns: 260px 1fr 260px; }
}

لماذا؟ تصميم الجوال أبسط عادةً، فتبني عليه بدل أن تُلغي تعقيدات سطح المكتب. والجوال (الأضعف) لا يحمّل قواعد لا يحتاجها.

نقاط التوقف حسب المحتوى

لا توجد أرقام سحرية لأجهزة محددة. صغّر النافذة تدريجياً، وعندما ينكسر التصميم (سطر طويل جداً، عناصر متزاحمة) ضع نقطة توقف هناك. القيم الشائعة كنقطة بداية: 640، 768، 1024، 1280.

الصيغة الحديثة للمدى

@media (width >= 768px) and (width < 1200px) {
    .sidebar { display: none; }
}

مدعومة في المتصفحات الحديثة وأوضح من min/max.

ليس العرض فقط

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
@media (hover: hover) {
    .card:hover { transform: translateY(-4px); }   /* تأثيرات hover للأجهزة التي فيها مؤشر فقط */
}
@media print {
    nav, .ads { display: none; }
}

- prefers-reduced-motion: بعض الناس تسبب لهم الحركة دواراً — احترم إعدادهم.

- hover: hover: على شاشات اللمس "المرور" غير موجود.

- prefers-color-scheme: الوضع الليلي (درس المتغيرات).

أحجام مرنة بلا Media Queries

h1 { font-size: clamp(1.75rem, 4vw + 1rem, 3rem); }   /* يكبر مع الشاشة بين حدين */
.container { width: min(100% - 32px, 1100px); margin-inline: auto; }

اختبر بشكل صحيح

أدوات المطور ← وضع الأجهزة (Ctrl+Shift+M) يحاكي الأحجام، لكن جرّب على جوال حقيقي أيضاً: اللمس، حجم الخط الفعلي، والأداء.

تمرين

أعد كتابة تنسيق صفحتك بأسلوب Mobile-First: عمود واحد افتراضياً، عمودان من 768px، والقائمة الجانبية من 1024px. أضف قاعدة prefers-reduced-motion تلغي الحركات.

/* تصميم متجاوب لبطاقة */
.card-grid {
    display: grid;
    gap: 20px;
}

/* 4 أعمدة على الشاشات الكبيرة */
@media (min-width: 1200px) {
    .card-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 3 أعمدة على الشاشات المتوسطة */
@media (min-width: 768px) and (max-width: 1199px) {
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 2 أعمدة على الأجهزة اللوحية */
@media (min-width: 576px) and (max-width: 767px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* عمود واحد على الهواتف */
@media (max-width: 575px) {
    .card-grid {
        grid-template-columns: 1fr;
    }
}