82. فهم استعلامات الوسائط (النحو والهيكل)

استعلامات الوسائط هي عبارات شرطية في CSS تتيح لك تطبيق مجموعة من الأنماط فقط إذا كانت معايير معينة (مثل عرض منفذ العرض، نوع الجهاز، نظام الألوان) صحيحة.

النحو الأساسي

يبدأ استعلام الوسائط بـ @media متبوعاً بنوع الوسائط وشرط واحد أو أكثر (ميزات الوسائط) محصوراً بين أقواس.

css /* هيكل استعلام الوسائط / @media <نوع-الوسائط> and (<ميزة-الوسائط>) { / قواعد CSS هنا تنطبق فقط عند استيفاء الشرط */ }

1. نوع الوسائط (Media Type)

• screen (الأكثر شيوعاً، لأجهزة الكمبيوتر والأجهزة اللوحية والهواتف)
• print (لتحسين الصفحات عند الطباعة)
• all (ينطبق على جميع الأجهزة)

2. ميزة الوسائط (الشرط)

نركز عادةً على عرض الشاشة باستخدام min-width أو max-width.

css /* مثال: تنطبق الأنماط فقط إذا كان عرض الشاشة 600 بكسل أو أقل */ @media screen and (max-width: 600px) { body { background-color: lightblue; } h1 { font-size: 1.5rem; } }

اختصار: عندما يكون نوع الوسائط all أو screen ، يمكنك حذفه:

css @media (max-width: 600px) { /* الأنماط هنا */ }