CSS Academy · درس

الصياغة ونقاط التوقف الشائعة

تعلّم صياغة استعلامات الوسائط ونقاط التوقف القياسية المستخدمة في تصميم الويب الحديث

الصياغة ونقاط التوقف الشائعة درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.

بنية الاستعلام الإعلامي

يحيط الاستعلام الإعلامي بقواعد CSS ويطبقها فقط عندما يتحقق شرط معين. البنية الأساسية:

<div class="box">Media query syntax demo</div>

أنواع الوسائط

أنواع الوسائط الأكثر شيوعًا:

all — ينطبق على جميع أجهزة الإخراج (الافتراضي)
screen — شاشات الحواسيب والهواتف
print — لمعاينة الطباعة والطباعة
speech — قارئات الشاشة

<div class="layout">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>

ميزات الوسائط

تصف ميزات الوسائط خصائص الجهاز أو إطار العرض. ومن الميزات الشائعة: width وheight وorientation وresolution وprefers-color-scheme وhover.

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

الميزة الأكثر استخدامًا؛ تستهدف الشاشات التي تساوي عتبة عرض معينة أو تتجاوزها. هذا هو نهج الهاتف أولًا.

<div class="box">Breakpoint ladder</div>

نقاط التوقف الشائعة

لا توجد نقاط توقف صحيحة عالميًا. إليك مجموعة شائعة تستند إلى عروض الأجهزة المعتادة:

480px — الهواتف الكبيرة
768px — الأجهزة اللوحية
1024px — الحواسيب المكتبية الصغيرة والأجهزة اللوحية بالوضع الأفقي
1280px — الحواسيب المكتبية القياسية
1536px — الحواسيب المكتبية الكبيرة

نقاط التوقف القائمة على المحتوى

بدلًا من تحديد نقاط التوقف حسب الأجهزة، تحدد الممارسة الحديثة نقاط التوقف عند النقطة التي يبدأ فيها المحتوى بالاختلال. صمّم لحجم واحد، ثم غيّر الحجم وأضف نقطة توقف عندما يبدأ التخطيط في الظهور بشكل سيئ.

بنية النطاقات (حديثة)

يدعم CSS الحديث بنية النطاقات داخل الاستعلامات الإعلامية، وهي أكثر قابلية للقراءة من الجمع بين min وmax:

<div class="panel">Range syntax demo</div>

الجمع باستخدام and

استخدم and لطلب تحقق شروط متعددة في الوقت نفسه:

<div class="sidebar">Sidebar</div>

النفي باستخدام not

استخدم not لنفي استعلام إعلامي. وينطبق ذلك على كل ما لا يطابق الاستعلام:

<div class="doc">Not-screen demo (affects print/speech only)</div>

استعلامات متعددة باستخدام ,

افصل الاستعلامات المتعددة بفواصل، كما تفعل مع قائمة المحددات. تُطبق الأنماط إذا تطابق أي استعلام.

<div class="page">
    Multiple queries with comma
    <div class="nav-drawer">Nav drawer (hidden on wide screens or print)</div>
  </div>

نقاط التوقف بوحدة em

يؤدي استخدام وحدات em لنقاط التوقف بدلًا من px إلى جعلها تتكيف مع تفضيل المستخدم لحجم خط المتصفح، مما يحسن إمكانية الوصول.

<div class="box">Em-based breakpoints</div>

تحقق سريع

ما الاستعلام الإعلامي الذي يطابق الشاشات التي يبلغ عرضها 1024px على الأقل؟

مراجعة

تطبق الاستعلامات الإعلامية CSS بشكل مشروط استنادًا إلى خصائص الجهاز أو إطار العرض. استخدم min-width لنهج الهاتف أولًا، وmax-width لنهج سطح المكتب أولًا. حدد نقاط التوقف حيث يحتاج إليها المحتوى، لا عند أحجام أجهزة عشوائية. تحسن بنية النطاقات الحديثة قابلية القراءة.

الأسئلة الشائعة

هل درس «الصياغة ونقاط التوقف الشائعة» مجاني؟

نعم — نص درس «الصياغة ونقاط التوقف الشائعة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «الصياغة ونقاط التوقف الشائعة»؟

تعلّم صياغة استعلامات الوسائط ونقاط التوقف القياسية المستخدمة في تصميم الويب الحديث تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟

لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «الصياغة ونقاط التوقف الشائعة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟

نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

الصياغة ونقاط التوقف الشائعة
استعلامات العرض والارتفاع والاتجاه
Prefers-Color-Scheme وPrefers-Reduced-Motion
دمج استعلامات وسائط متعددة

← العودة إلى CSS Academy