مثال
تغيير لون الخلفية إذا كان العرض هو 480 بكسل أو أوسع:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
انها محاولة لنفسك » أكثر "Try it Yourself" الأمثلة أدناه.
تعريف واستخدام
وتستخدم هذه القاعدةmedia لتحديد قواعد نمط مختلف لمختلف وسائل الإعلام / أنواع الأجهزة.
في CSS2 هذه كانت تسمى أنواع وسائل الإعلام، بينما في CSS3 يسمى استفسارات وسائل الإعلام.
استفسارات وسائل الإعلام تبدو في قدرة الجهاز، ويمكن استخدامها للتحقق أشياء كثيرة، مثل:
- العرض والارتفاع من العرض
- العرض والارتفاع للجهاز
- التوجه (is the tablet/phone in landscape or portrait mode?)
- القرار
- وأكثر بكثير
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم تماما سيادةmedia.
| خاصية | |||||
|---|---|---|---|---|---|
| @media | 21 | 9 | 3.5 | 4.0 | 9 |
CSS بناء الجملة
@media not|onlymediatype and (media feature){
CSS-Code;
}يمكنك أيضا أن يكون الأنماط المختلفة لمختلف وسائل الإعلام:
<link rel="stylesheet" media=" mediatype and|not|only ( media
feature )"
href=" mystylesheet.css ">أنواع وسائل الإعلام
| القيمة | وصف |
|---|---|
| all | تستخدم لجميع الأجهزة نوع الوسائط |
| aural | إهمال. تستخدم لخطاب وتخليق سليمة |
| braille | إهمال. تستخدم لأجهزة ردود الفعل اللمسية برايل |
| embossed | إهمال. تستخدم لطابعات برايل ترحيلها |
| handheld | إهمال. تستخدم للأجهزة الصغيرة أو المحمولة |
| يستخدم للطابعات | |
| projection | إهمال. تستخدم لتقديم العروض المتوقعة، مثل الشرائح |
| screen | تستخدم لشاشات الكمبيوتر، وأقراص، والهواتف الذكية الخ |
| speech | تستخدم لقراءة الشاشة أن "reads" صفحة بصوت عال |
| tty | إهمال. استخدام وسائل الإعلام باستخدام شبكة الطابع خطوة ثابت، مثل teletypes ومحطات |
| tv | إهمال. تستخدم لأجهزة التلفزيون من نوع |
وسائل الإعلام الميزات
| القيمة | وصف |
|---|---|
| aspect-ratio | النسبة بين العرض والطول من العرض |
| color | عدد البتات لكل عنصر اللون لجهاز الإخراج |
| color-index | عدد من الألوان يمكن أن تعرض الجهاز |
| device-aspect-ratio | النسبة بين العرض والارتفاع للجهاز |
| device-height | ارتفاع الجهاز، مثل شاشة الكمبيوتر |
| device-width | عرض للجهاز، مثل شاشة الكمبيوتر |
| grid | ما إذا كان الجهاز هو شبكة أو نقطية |
| height | ذروة العرض |
| max-aspect-ratio | الحد الأقصى النسبة بين العرض والارتفاع من منطقة العرض |
| max-color | الحد الأقصى لعدد البتات لكل عنصر اللون لجهاز الإخراج |
| max-color-index | الحد الأقصى لعدد الألوان يمكن أن تعرض الجهاز |
| max-device-aspect-ratio | الحد الأقصى النسبة بين العرض والارتفاع للجهاز |
| max-device-height | وأقصى ارتفاع للجهاز، مثل شاشة الكمبيوتر |
| max-device-width | وأقصى عرض للجهاز، مثل شاشة الكمبيوتر |
| max-height | وأقصى ارتفاع من ناحية العرض، مثل نافذة المتصفح |
| max-monochrome | الحد الأقصى لعدد البتات في "color" على أحادية اللون (greyscale) جهاز |
| max-resolution | القرار الحد الأقصى للجهاز، وذلك باستخدام نقطة في البوصة أو dpcm |
| max-width | الحد الأقصى لعرض مساحة العرض، مثل نافذة المتصفح |
| min-aspect-ratio | الحد الأدنى من النسبة بين العرض والارتفاع من منطقة العرض |
| min-color | الحد الأدنى لعدد من البتات لكل عنصر اللون لجهاز الإخراج |
| min-color-index | الحد الأدنى لعدد من الألوان يمكن أن تعرض الجهاز |
| min-device-aspect-ratio | الحد الأدنى من النسبة بين العرض والارتفاع للجهاز |
| min-device-width | الحد الأدنى لعرض الجهاز، مثل شاشة الكمبيوتر |
| min-device-height | ارتفاع الحد الأدنى للجهاز، مثل شاشة الكمبيوتر |
| min-height | ارتفاع الحد الأدنى من مساحة العرض، مثل نافذة المتصفح |
| min-monochrome | الحد الأدنى لعدد من بت في "color" على أحادية اللون (greyscale) جهاز |
| min-resolution | الحد الأدنى للقرار من الجهاز، وذلك باستخدام نقطة في البوصة أو dpcm |
| min-width | الحد الأدنى للعرض من ناحية العرض، مثل نافذة المتصفح |
| monochrome | عدد البتات في "color" على أحادية اللون (greyscale) جهاز |
| orientation | توجه العرض (landscape or portrait mode) |
| overflow-block | كيف يمكن للمحتوى مقبض جهاز إخراج تجاوزات العرض على طول محور كتلة (added in Media Queries Level 4) |
| overflow-inline | يمكن أن المحتوى الذي يفيض إطار العرض على طول محور مضمنة يتم تمريره (added in Media Queries Level 4) |
| resolution | حل جهاز الإخراج، وذلك باستخدام نقطة في البوصة أو dpcm |
| scan | عملية المسح الضوئي للجهاز الإخراج |
| update-frequency | كيف يمكن بسرعة جهاز الإخراج تعديل مظهر المحتوى (added in Media Queries Level 4) |
| width | عرض المعاينة |
مزيد من الأمثلة
مثال
استخدام قاعدةmedia لجعل التصميم المتجاوب:
@media only screen and (max-width: 500px) {
.gridmenu
{
width:100%;
}
.gridmain
{
width:100%;
}
.gridright {
width:100%;
}
}
انها محاولة لنفسك » صفحات ذات صلة
درس CSS: CSS الإعلام استعلامات