كيف أستخدم Media Queries؟

تُستخدم Media Queries في CSS لجعل تصميم الموقع متجاوبًا (Responsive)، بحيث يتكيف مع أحجام الشاشات المختلفة مثل الهواتف، الأجهزة اللوحية، وأجهزة الكمبيوتر.

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

أولاً: ما هي Media Queries؟

هي ميزة في CSS تُستخدم لتحديد شروط معينة (مثل عرض الشاشة)، وعند تحقق هذه الشروط يتم تطبيق أنماط محددة.

مثال بسيط:

@media (max-width: 768px) {
  body {
    background-color: lightgray;
  }
}

في هذا المثال، يتم تغيير لون الخلفية فقط عندما يكون عرض الشاشة 768 بكسل أو أقل.

ثانيًا: أهم استخدامات Media Queries

• جعل الموقع مناسبًا للهواتف المحمولة.
• تحسين عرض النصوص والصور.
• تغيير ترتيب العناصر حسب حجم الشاشة.
• إخفاء أو إظهار عناصر معينة.

ثالثًا: أشهر الشروط المستخدمة

1. max-width

يُستخدم لتطبيق الأنماط على الشاشات الصغيرة:

@media (max-width: 600px) { ... }

2. min-width

يُستخدم للشاشات الأكبر:

@media (min-width: 1024px) { ... }

3. الجمع بين الشروط

@media (min-width: 600px) and (max-width: 1024px) { ... }

رابعًا: كيف تستخدمها بشكل عملي؟

1. ابدأ بتصميم الموقع للشاشات الصغيرة (Mobile First).
2. أضف Media Queries لتكبير التصميم تدريجيًا.
3. عدّل حجم الخطوط والصور حسب الشاشة.
4. غيّر التخطيط (Layout) مثل استخدام Flexbox أو Grid.

خامسًا: مثال عملي بسيط

.container {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}

في هذا المثال، يتم عرض العناصر بشكل عمودي على الهاتف، وأفقي على الشاشات الأكبر.

نصائح لاستخدام Media Queries باحتراف

• استخدم breakpoints شائعة (مثل 768px و1024px).
• لا تكثر من Media Queries بشكل عشوائي.
• اختبر الموقع على أجهزة مختلفة.
• استخدم أدوات المتصفح لمحاكاة الشاشات.

في النهاية، تعتبر Media Queries من أهم أدوات تصميم المواقع الحديثة، لأنها تساعدك على إنشاء تجربة مستخدم مريحة ومتناسقة على جميع الأجهزة، وهو عامل أساسي لنجاح أي موقع إلكتروني.