89. التوجيه الأفقي مقابل الرأسي لمنفذ العرض

يمكن لاستعلامات الوسائط استهداف توجيه الجهاز، مما يتيح لك تحسين التخطيط عندما يقوم المستخدم بتدوير هاتفه أو جهازه اللوحي.

ميزة orientation

تتحقق هذه الميزة مما إذا كان ارتفاع منفذ العرض أكبر من عرضه أو العكس.

1. portrait (رأسي): ارتفاع منفذ العرض أكبر من أو يساوي عرضه (وضع إمساك الهاتف التقليدي).
2. landscape (أفقي): عرض منفذ العرض أكبر من ارتفاعه.

css /* تنطبق الأنماط عندما يتم إمساك الجهاز أفقياً / @media (orientation: landscape) { / تعظيم استخدام المساحة الأفقية / .main-section { column-count: 2; / تقسيم المحتوى إلى عمودين */ } }

/* تنطبق الأنماط عندما يتم إمساك الجهاز رأسياً / @media (orientation: portrait) { / إعطاء الأولوية للتكديس الرأسي */ .main-section { column-count: 1; } }

ملاحظة: غالباً ما تُدمج استعلامات التوجيه مع استعلامات العرض (مثل (min-width: 400px) and (orientation: landscape)) لاستهداف قدرات جهاز محددة.