جاري التحميل...

استعلامات الوسائط في CSS

درس التصميم المتجاوب وضع الذهنية: شجرة HTML واحدة، viewport meta، حاوية مرنة، وحدات نسبية. استعلامات الوسائط هي المفتاح — كتل CSS تُفعَّل فقط عندما يتحقق شرط (غالباً عرض الـ viewport). هذا الدرس يعلّم النحو والعادات الهادئة؛ الصور المتجاوبة ونقاط التوقف يعمّقان الأدوات لاحقاً.

صندوق أدوات استعلام الوسائط

📊 استعلامات الوسائط بنظرة واحدة

قطعة	المهمة اليومية
`@media`	يفتح كتلة CSS شرطية
ميزة وسائط (`min-width`، `max-width`، …)	الاختبار الذي يقيّمه المتصفح
`and`	يشترط تطابق كل الميزات المدرجة
استعلامات مفصولة بفاصلة	منطق أو — يكفي أي قائمة مطابقة
مجموعة قواعد داخل `{ }`	أنماط تُطبَّق فقط طالما الشرط متحقق
نوع الوسائط (`screen`، `print`)	مرشح اختياري لوسط الإخراج

بلا استعلامات، كل قاعدة «دائماً مفعّلة». معها تبقي أساساً متيناً (من الدرس السابق) وتُكدّس التغييرات طبقة فوق طبقة — أعمدة أوسع، خط أكبر، تنقّل مختلف — فقط عندما يتسع الـ viewport لها.

تشريح `@media`

النمط الكلاسيكي: ميزة بين قوسين، ثم كتلة أقواس بتصريحات عادية. استخدم rem أو em للعرض حين تستطيع — يتناسبان مع إعدادات الجذر/الخط أفضل من قوائم بكسل الجهاز.

استعلام min-width أساسي

css

.nav {
display: block;
}

@media (min-width: 48rem) {
.nav {
display: flex;
gap: 1rem;
}
}

Mobile-first مع `min-width`

اكتب التخطيط الضيق في ورقة الأنماط الأساسية. استخدم @media (min-width: …) لـإضافة تحسينات كلما اتسع الـ viewport. كل خطوة تغيّر طبقة واضحة — تباعد أو أعمدة أو تنقّل — لا تعيد كتابة الصفحة كاملة في كل خطوة.

تحسين mobile-first

css

.hero {
padding: 1rem;
font-size: 1.125rem;
}

@media (min-width: 40rem) {
.hero {
padding: 2rem;
font-size: 1.25rem;
}
}

@media (min-width: 64rem) {
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
}

Desktop-first مع `max-width`

إن كان الأساس تخطيطاً عريضاً، فإن @media (max-width: …) يضيّق الأنماط تحت عتبة — تكديس الأعمدة، تصغير الـ padding، تبسيط الشريط. كن متسقاً داخل المشروع: لا تتأرجح بين مكدس min-width خالص وmax-width خالص بلا سبب.

تضييق desktop-first

css

.sidebar {
width: 16rem;
float: left;
}

@media (max-width: 50rem) {
.sidebar {
width: 100%;
float: none;
}
}

الجمع بين الميزات بـ `and`

اربط الميزات بحيث يجب أن تتطابق كلها. مفيد للنطاقات (min وmax معاً) أو لقرن العرض بميزة أخرى. الفاصلة بين قوائم @media كاملة تعني أو.

نطاق مع and

css

.card-grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}

@media (min-width: 40rem) and (max-width: 63.99rem) {
.card-grid {
grid-template-columns: 1fr 1fr;
}
}

أبعد من العرض — الطباعة (وإضافات هادئة)

العرض هو أداة كل يوم. أنواع مثل print تخفي الشريط الورقي. ميزات التفضيل (مثل prefers-reduced-motion) للّمس اللمسات في إمكانية الوصول — استخدمها هنا باعتدال؛ درس نقاط التوقف ينظّم الاستراتيجية، وإمكانية الوصول تغطي الحركة لاحقاً.

أنماط طباعة بسيطة

css

@media print {
.site-nav,
.ad-slot {
display: none;
}

body {
color: #000;
background: #fff;
}
}

عادة هادئة لنقاط التوقف

اختر قائمة قصيرة من عروض مسماة تطابق نقاط ضغط تخطيطك — لا كل طراز هاتف. وثّقها (مثلاً «التنقّل ينطوي تحت 48rem»). فضّل أساساً مرناً + استعلامات قليلة على غابة قواعد لكل جهاز. الدروس التالية تغطي الصور وخطة نقاط توقف أوفى.

جرّب بنفسك

خذ تنقّلاً مكدّساً وأضف @media (min-width: …) واحداً يحوّله إلى flex.
أعد كتابة الفكرة نفسها بتضييق desktop-first بـ max-width — لاحظ فرق الأنماط الأساسية.
أضف استعلام نطاق بـ min-width و max-width لشريط عمودين فقط.
أخفِ لافتة زخرفية بـ @media print.
اكتب ثلاث نقاط توقف مسماة لصفحة التمرين — أبقِ القائمة قصيرة.

أخطاء شائعة

استعلام منفصل لكل علامة جهاز بدل نقاط ضغط التخطيط
نسيان } الختامية فيختفي CSS اللاحق داخل الاستعلام
خلط مكدسات min-width وmax-width عشوائياً حتى يقاتل الـ cascade نفسه
الاعتماد على الاستعلامات وحدها مع تجاهل الحاوية المرنة والوحدات النسبية من التصميم المتجاوب
إسقاط كتالوج طويل لنقاط التوقف هنا — تلك الحرفة تكمل في نقاط التوقف؛ الصور في الصور المتجاوبة

ملخص

استعلامات الوسائط تلف CSS ليعمل فقط عند تطابق الشروط
min-width يُحسّن صعوداً (mobile-first)؛ max-width يضيّق نزولاً (desktop-first)
and يشترط كل الميزات؛ الفواصل بين الاستعلامات تعمل كـ أو
أبقِ نقاط توقف قليلة ومسماة مربوطة بحاجة تخطيط حقيقية
التالي: الصور المتجاوبة — وسائط تتوسّع دون كسر العمود

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة