85. منطق استعلامات الوسائط: AND و OR و NOT

يمكن دمج استعلامات الوسائط باستخدام معاملات منطقية لاستهداف خصائص جهاز محددة للغاية.

1. معامل and

استخدم and للجمع بين شروط متعددة. يجب أن تكون جميع الشروط صحيحة لتطبيق الأنماط.

css /* تنطبق الأنماط فقط عندما يكون عرض منفذ العرض بين 768 و 1200 بكسل */ @media (min-width: 768px) and (max-width: 1200px) { .mid-range-ad { display: block; } }

2. الفاصلة (معامل OR)

تسمح لك الفاصلة بتطبيق نفس الأنماط إذا كان أي من الشروط صحيحاً.

css /* تنطبق الأنماط إذا كانت الشاشة أصغر من 600 بكسل أو إذا كان الجهاز طابعة / @media (max-width: 600px), print { .nav-menu { display: none; / إخفاء التنقل على الشاشات الصغيرة وعند الطباعة */ } }

3. معامل not

استخدم not لنفي الاستعلام، وتطبيق الأنماط عندما يكون الشرط خاطئاً.

css /* تنطبق الأنماط على كل شيء باستثناء وسائط الطباعة / @media not print and (min-width: 800px) { / ... */ }

نصيحة: عند العمل بأدوات حديثة، فكر في استخدام اصطلاح تسمية المتغيرات لنقاط الانكسار الخاصة بك (مثل --breakpoint-md: 768px;) للحفاظ على اتساق أرقامك عبر ملف التنسيق بالكامل.