استعلامات الوسائط @media

الصياغة

/* الجوال أولًا: الأساس بلا شرط */
.grid { display: grid; gap: 16px; }

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

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

<style>
  .rg { display: grid; gap: 8px; }
  .rg div { background: #7c5cff; color: white; padding: 14px; border-radius: 10px; text-align: center; }
  @media (min-width: 500px) {
    .rg { grid-template-columns: 1fr 1fr; }
    .rg div { background: #22d3ee; }
  }
</style>
<div class="rg"><div>عنصر 1</div><div>عنصر 2</div></div>
<p>وسّع المعاينة فوق 500px: عمودان ولون جديد — استعلام حي.</p>

أهم القيم

💡 نصائح عملية

• ابنِ للجوال أولًا ثم وسّع بـ min-width — أنظف من التقليص العكسي دائمًا
• قلل حاجتك للاستعلامات أصلًا: clamp وauto-fit/minmax تتجاوب ذاتيًا

⚠️ أخطاء شائعة

• خلط min وmax عشوائيًا بتداخلات متصارعة — اختر منهجًا والتزمه
• نسيان meta viewport فيتظاهر الجوال بعرض 980px وتفشل الاستعلامات

خصائص ذات صلة