استعلامات العرض والارتفاع والاتجاه
استهدف أبعادًا محددة لإطار العرض واتجاهات الأجهزة باستخدام ميزات الوسائط
استعلامات العرض والارتفاع والاتجاه درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
ميزة الوسائط width
تستهدف ميزة width عرض إطار العرض. استخدم min-width وmax-width لتعريف النطاقات.
<div class="box">width feature demo</div>
ميزة الوسائط height
تستهدف ميزة height ارتفاع إطار العرض. وهي مفيدة لإطارات العرض القصيرة، مثل الهواتف بالوضع الأفقي، حيث تكون المساحة الرأسية محدودة.
<div class="hero">Hero (grows on tall viewports)</div>
نمط إطار العرض القصير
اكتشف إطارات العرض القصيرة وقلّل المسافات الداخلية والارتفاعات التي قد تتسبب في تجاوز المحتوى:
<div class="modal">Modal content that scrolls when the viewport is short. Lorem ipsum dolor sit amet, consectetur.</div>
orientation: portrait وlandscape
تكتشف ميزة orientation ما إذا كان إطار العرض أطول (portrait) أو أعرض (landscape) من اتجاهه الآخر.
<div class="hero">Orientation-aware hero</div>
نسبة كثافة بكسلات الجهاز
استهدف الشاشات عالية الكثافة (Retina) باستخدام ميزة resolution أو الميزة غير القياسية، لكنها مدعومة على نطاق واسع، -webkit-device-pixel-ratio.
<div class="logo"></div>
ميزة aspect-ratio
استهدف نسب أبعاد محددة لإطار العرض. ويفيد ذلك في توسيط المحتوى بطرق مختلفة في إطارات العرض 4:3 و16:9.
<div class="video"></div>
إمكانية hover
تكتشف ميزة hover: hover ما إذا كان الإدخال الأساسي مؤشرًا دقيقًا يمكنه التحويم. وهي مفيدة للأنماط الخاصة بالأجهزة اللمسية.
<div class="card">Card (hover me)</div>
<div class="card is-hovered">Card (hover state shown)</div>
ميزة pointer
يمثل pointer: fine مؤشر فأرة دقيقًا، بينما يمثل pointer: coarse إصبعًا أو قلمًا. ويفيد ذلك في ضبط أحجام أهداف النقر.
<button>Tap target</button>
الجمع بين width وheight
أنشئ قواعد خاصة بالهواتف في الوضع الأفقي من خلال الجمع بين min-width وmax-height:
<div class="nav">Nav bar</div>
أبعاد إطار العرض مقابل أبعاد الجهاز
تستهدف استعلامات CSS إطار العرض (نافذة المتصفح)، وليس أبعاد شاشة الجهاز الفعلية. يؤدي تغيير حجم نافذة متصفح سطح المكتب إلى تغيير عرض إطار العرض في الوقت الفعلي.
وحدات إطار العرض والاستعلامات الإعلامية
تستجيب الاستعلامات الإعلامية ووحدات إطار العرض (vw وvh) لأبعاد إطار العرض نفسها. استخدم الاستعلامات الإعلامية لتغيير التخطيط، ووحدات إطار العرض لتحديد أحجام مرنة داخل التخطيط.
تحقق سريع
ما ميزة الوسائط التي تكتشف ما إذا كان الجهاز يملك مؤشرًا دقيقًا يمكنه التحويم فوق العناصر؟
مراجعة
تشمل ميزات الوسائط width وheight وorientation وresolution وhover وpointer. استخدمها لتكييف التخطيطات مع أبعاد إطار العرض وإمكانات الجهاز. وتساعد ميزتا hover وpointer في استهداف الأجهزة اللمسية مقابل أجهزة الفأرة، بما يتجاوز حجم الشاشة وحده.
الأسئلة الشائعة
هل درس «استعلامات العرض والارتفاع والاتجاه» مجاني؟
نعم — نص درس «استعلامات العرض والارتفاع والاتجاه» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «استعلامات العرض والارتفاع والاتجاه»؟
استهدف أبعادًا محددة لإطار العرض واتجاهات الأجهزة باستخدام ميزات الوسائط تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «استعلامات العرض والارتفاع والاتجاه»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- الصياغة ونقاط التوقف الشائعة
- استعلامات العرض والارتفاع والاتجاه
- Prefers-Color-Scheme وPrefers-Reduced-Motion
- دمج استعلامات وسائط متعددة