2.6 KiB
| title | localeTitle |
|---|---|
| CSS3 at Media Rule | CSS3 في Media Rule |
CSS3 في Media Rule
قاعدة وسائط CSS3 هي قاعدة تسمح باستخدام استعلامات الوسائط. يمكن أن تسمح لك استعلامات الوسائط بتكوين صفحة الويب الخاصة بك (إما جزء منها أو كلها) بشكل مختلف استنادًا إلى أنواع أو أجهزة وسائط مختلفة.
يتم إنشاء استعلام الوسائط باستخدام العلامة @media ومن ثم توفير قاعدة من أجل التحقق من أشياء مثل:
- عرض وارتفاع إطار العرض الحالي
- توجيه الجهاز (ينطبق ذلك على الأجهزة اللوحية أو الهواتف)
- القرار الحالي
- و اكثر
يوجد حاليًا أربعة أنواع وسائط محتملة:
- الكل (افتراضي - سيستهدف هذا جميع الأجهزة)
- الطباعة (تستخدم للطابعات ، على سبيل المثال توفير أنماط طباعة منفصلة)
- الشاشة (تستخدم لأجهزة الكمبيوتر ، والهواتف ، والأجهزة اللوحية ، وما إلى ذلك)
- الكلام (يستخدم لأجهزة الوصول مثل قارئ الشاشة الذي يروي محتويات صفحة ويب)
يتم استخدام استعلامات الوسائط لجميع أنواع purporses لأنها تسمح بالعديد من ميزات الوسائط المختلفة. أحد أكثر الاستخدامات شيوعًا لاستعلام الوسائط هو جعل صفحة الويب سريعة الاستجابة ؛ مما يعني أنها ستتصرف بشكل مختلف بناءً على حجم الشاشة.
مثال لاستعلام الوسائط هو كما يلي:
@media screen and (max-width: 1000px) {
body {
background: #000;
}
}
لا تنطبق قاعدة CSS في استعلام Media إلا عندما تكون القاعدة صحيحة. على سبيل المثال ، بالنظر إلى المقتطف أعلاه ، سيتم تغيير خلفية النص إلى #000 فقط عندما يزور أحد المستخدمين الصفحة بجهاز بعرضه 1000 بكسل أو أقل. إذا كانت أعلى من 1000 بكسل ، فلن تنطبق هذه القاعدة.