شرح media queries في CSS — كيف تجعل التصميم يتكيّف مع كل شاشة؟

تخيّل صفحة منتجات: على الهاتف تريد بطاقة واحدة في كل سطر، على التابلت تريد بطاقتين، وعلى الديسكتوب ثلاث بطاقات. هنا يأتي دور @media في CSS.

إذا كنت تبحث عن شرح media queries في CSS أو الفرق بين max-width و min-width أو أفضل breakpoints للتصميم المتجاوب، فهذا الدرس يشرحها بشكل عملي.

ما هي Media Queries في CSS؟

Media Queries تسمح لك بكتابة قواعد CSS تعمل فقط عندما يتحقق شرط معين مثل عرض الشاشة أو اتجاه الجهاز.

التعريف البسيط: @media هي "شرط" يخبر CSS متى يغيّر شكل الواجهة.

صيغة Media Query في CSS

قاعدة شرطية أساسية

@media (max-width: 768px) {
    /* CSS for small screens */
}

ماذا يفعل هذا الكود؟ يطبق القواعد فقط على الشاشات الصغيرة.

النتيجة المتوقعة: تخطيط مناسب للهاتف بدون التأثير على الشاشات الكبيرة.

خطأ شائع: كتابة شروط كثيرة بلا نظام واضح.

الفرق بين max-width و min-width في CSS

• max-width: يستهدف الشاشات الأصغر أو المساوية للقيمة.
• min-width: يستهدف الشاشات الأكبر أو المساوية للقيمة.

/* Mobile fix */
@media (max-width: 576px) {
    .title {
        font-size: 1.1rem;
    }
}

/* Desktop enhancement */
@media (min-width: 992px) {
    .layout {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
}

ماذا يفعل هذا الكود؟ الأول يحسن الهاتف، والثاني يوسع التخطيط للديسكتوب.

النتيجة المتوقعة: كل جهاز يأخذ النسخة الأنسب من نفس الصفحة.

خطأ شائع: خلط max/min بشكل عشوائي داخل نفس المشروع.

Breakpoints شائعة في Media Queries

Story Example: بطاقة منتج عبر 3 شاشات

لنكمل سيناريو متجر صغير: في الهاتف نعرض منتجاً واحداً بكل سطر، في التابلت منتجين، وفي الديسكتوب ثلاثة.

.product-card {
    width: 100%;
}

@media (min-width: 768px) {
    .product-card {
        width: 50%;
    }
}

@media (min-width: 992px) {
    .product-card {
        width: 33.33%;
    }
}

ماذا يفعل هذا الكود؟ نفس البطاقة تتحول تدريجياً مع توسع الشاشة.

النتيجة المتوقعة: تجربة مريحة على الهاتف، واستغلال أفضل للمساحة على الشاشات الأكبر.

خطأ شائع: القفز مباشرة إلى 3 أعمدة حتى على الشاشات الصغيرة.

أفضل نهج: Mobile First في Media Queries

في Mobile First تكتب نسخة الهاتف أولاً كقاعدة، ثم تضيف تحسينات تدريجية عبر min-width.

أخطاء شائعة في CSS Media Queries

١) Breakpoints كثيرة جداً: كود معقد وصعب الصيانة.

٢) تجاهل Mobile First: يصعّب ترتيب القواعد.

٣) عدم اختبار الأجهزة الحقيقية: تظهر مشاكل لا تلاحظها في شاشة المحرر فقط.

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

ما هي Media Queries في CSS؟

هي قواعد شرطية تغيّر التنسيق حسب عرض الشاشة أو خصائص الجهاز.

ما الفرق بين max-width و min-width؟

max-width للشاشات الأصغر، وmin-width للشاشات الأكبر. نهج Mobile First يعتمد غالباً على min-width.

ما أفضل breakpoints في CSS؟

القيم الشائعة 576px و768px و992px و1200px، لكن الأفضل اختيارها حسب نقاط انكسار تصميمك فعلياً.

هل أستخدم media query لكل عنصر؟

لا، الأفضل تنظيمها على مستوى المكونات أو أقسام layout الرئيسية.

ما أول تدريب عملي على Media Queries؟

تحويل شبكة بطاقات من عمود واحد إلى عمودين ثم ثلاثة باستخدام min-width.