استعلامات الوسائط والتطوير الموجّه للهواتف أولًا
اكتب نقاط التوقف باستخدام استعلامات الوسائط min-width، وأنشئ تخطيط الهاتف أولًا، ثم حسّنه تدريجيًا للشاشات الأكبر.
استعلامات الوسائط والتطوير الموجّه للهواتف أولًا درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ما هي استعلامات الوسائط؟
تطبّق استعلامات الوسائط قواعد CSS فقط عند تحقق شروط معينة، مثل تجاوز عرض viewport حدًا معينًا. وهي أساس التصميم المتجاوب، إذ تتيح لورقة أنماط واحدة التكيف مع أي حجم شاشة.
الصيغة الأساسية
يغلّف استعلام الوسائط مجموعة من CSS داخل قاعدة @media. ولا تُطبّق القواعد الموجودة داخله إلا عندما يطابق الشرط.
@media (min-width: 768px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}min-width مقابل max-width
min-width: طبّق الأنماط عندما يكون عرض viewport على الأقل بهذا المقدار (نهج البدء من الأجهزة المحمولة). max-width: طبّق الأنماط عندما يكون عرض viewport على الأكثر بهذا المقدار (نهج البدء من سطح المكتب). يُفضّل استخدام min-width في التطوير الذي يبدأ من الأجهزة المحمولة.
/* Mobile-first (preferred): */
@media (min-width: 768px) { /* tablets and up */ }
@media (min-width: 1024px) { /* desktops and up */ }
/* Desktop-first: */
@media (max-width: 767px) { /* phones only */ }نهج البدء من الأجهزة المحمولة
اكتب CSS للشاشات الصغيرة أولًا (خارج أي استعلام وسائط). ثم استخدم استعلامات الوسائط المعتمدة على min-width لإضافة التعقيد تدريجيًا للشاشات الأكبر. ينتج عن ذلك CSS أصغر حجمًا لمستخدمي الأجهزة المحمولة وكود أنظف عمومًا.
.card {
/* Mobile defaults: single column */
padding: 16px;
font-size: 0.9rem;
}
@media (min-width: 768px) {
.card {
/* Tablet enhancement */
padding: 24px;
font-size: 1rem;
}
}نقاط التوقف الشائعة
اختر نقاط التوقف بناءً على محتواك، لا على أجهزة محددة. من نقاط البداية الشائعة: 480px (الهواتف الكبيرة)، و768px (الأجهزة اللوحية)، و1024px (أجهزة سطح المكتب الصغيرة)، و1280px (أجهزة سطح المكتب الكبيرة). تجنّب نقاط التوقف التي تستهدف طرز أجهزة محددة.
أنواع الوسائط
بالإضافة إلى عرض الشاشة، يمكنكم استهداف أنواع الوسائط: screen للشاشات وprint للطابعات. تتيح استعلامات وسائط الطباعة تخصيص مظهر الصفحة عند طباعتها، مثل إخفاء شريط التنقل وتعديل الألوان.
@media print {
nav, footer, .ads {
display: none;
}
body {
font-size: 12pt;
color: black;
}
}دمج الشروط باستخدام and
يمكنكم ربط الشروط باستخدام and لتطبيق الأنماط عندما يتحقق الشرطان معًا فقط. استخدموا not وor لإنشاء منطق أكثر تعقيدًا.
@media (min-width: 768px) and (max-width: 1023px) {
/* tablets only */
}
@media (orientation: landscape) and (max-width: 767px) {
/* landscape phones */
}prefers-color-scheme
استجيبوا لتفضيل الوضع الداكن في نظام تشغيل المستخدم. وفّروا سمة داكنة تلقائيًا من دون الحاجة إلى مفتاح تبديل.
@media (prefers-color-scheme: dark) {
body {
background: #1a202c;
color: #f7fafc;
}
}prefers-reduced-motion
راعوا المستخدمين الذين يفضّلون تقليل الحركة، مثل المصابين باضطرابات الجهاز الدهليزي أو الصرع. عطّلوا الرسوم المتحركة أو بسّطوها داخل استعلام الوسائط هذا.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}استعلامات الحاويات — المستقبل
تطبّق استعلامات الحاويات (@container) الأنماط بناءً على حجم الحاوية الأصلية بدلًا من إطار العرض. وهي تتيح استجابة حقيقية على مستوى المكوّنات، وأصبحت متاحة في جميع المتصفحات الحديثة منذ عام 2023.
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card { flex-direction: row; }
}الخصائص المنطقية لدعم RTL
استخدموا خصائص منطقية مثل margin-inline-start بدلًا من margin-left لإنشاء تخطيطات تعمل مع اللغات التي تُكتب من اليسار إلى اليمين ومن اليمين إلى اليسار. وبذلك تضمنون جاهزية تخطيطاتكم المتجاوبة للمستقبل.
اختبار سريع
أي نهج يعرّف استراتيجية CSS التي تبدأ بالهاتف المحمول mobile-first تعريفًا صحيحًا؟
مراجعة: استعلامات الوسائط والنهج mobile-first
استخدموا @media (min-width: N) للتحسين التدريجي وفق نهج mobile-first. اكتبوا الأنماط الأساسية للهواتف المحمولة من دون استعلامات. ثم أضيفوا التعقيد للشاشات الأكبر. استخدموا prefers-color-scheme للوضع الداكن، وprefers-reduced-motion لإتاحة الوصول، واستعلامات الحاويات للاستجابة على مستوى المكوّنات.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 41
- الدروس
- 163
الأسئلة الشائعة
هل درس «استعلامات الوسائط والتطوير الموجّه للهواتف أولًا» مجاني؟
نعم — نص درس «استعلامات الوسائط والتطوير الموجّه للهواتف أولًا» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «استعلامات الوسائط والتطوير الموجّه للهواتف أولًا»؟
اكتب نقاط التوقف باستخدام استعلامات الوسائط min-width، وأنشئ تخطيط الهاتف أولًا، ثم حسّنه تدريجيًا للشاشات الأكبر. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «استعلامات الوسائط والتطوير الموجّه للهواتف أولًا»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- وسم Meta لإطار العرض
- Flexbox للتخطيط
- CSS Grid للتخطيط
- استعلامات الوسائط والتطوير الموجّه للهواتف أولًا