CSS2 وعرض أنواع وسائل الإعلام
و @media جعل الحكم، وعرض في CSS2، من الممكن تحديد قواعد نمط مختلف لأنواع وسائل الإعلام المختلفة.
الأمثلة على ذلك: هل يمكن أن يكون مجموعة واحدة من قواعد النمط لشاشات الكمبيوتر، واحدة للطابعات، واحدة للأجهزة المحمولة، واحد لأجهزة التلفزيون من نوع، وهلم جرا.
للأسف هذه أنواع وسائل الإعلام لم يحصل على الكثير من الدعم من قبل الأجهزة، وغيرها من نوع وسائط الطباعة.
CSS3 تطرح وسائل الإعلام استعلامات
استفسارات وسائل الإعلام في CSS3 تمديد CSS2 أنواع وسائل الإعلام فكرة: بدلا من البحث عن نوع الجهاز، فإنها تبدو في قدرة الجهاز.
استفسارات وسائل الإعلام يمكن استخدامها للتحقق من أشياء كثيرة، مثل:
- العرض والارتفاع من العرض
- العرض والارتفاع للجهاز
- التوجه (هو قرص / الهاتف في المشهد أو وضع عمودي؟)
- قرار
عن طريق استفسارات وسائل الإعلام هي تقنية شعبية لتقديم ورقة نمط مصممة خصيصا لأقراص، اي فون، و Android.
دعم المتصفح
الأرقام في الجدول تحدد أول نسخة متصفح يدعم تماما سيادةmedia.
| الملكية | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
سؤال التركيب وسائل الإعلام
يتكون الاستعلام وسائل الإعلام من نوع الوسائط ويمكن أن تحتوي على واحد أو أكثر من التعبيرات، التي عزم إما صحيحة أو خاطئة.
@media not|onlymediatype and (expressions) {
CSS-Code;
}نتيجة الاستعلام صحيح إذا كان نوع الوسائط المحددة يطابق نوع الجهاز يتم عرض المستند على وكل التعبيرات في الاستعلام وسائل الإعلام صحيحة. عندما يكون استعلام وسائل الإعلام صحيح، يتم تطبيق ورقة نمط أو أسلوب قواعد المناظرة وفقا للقواعد المتتالية العادية.
إلا إذا كنت تستخدم ليس فقط أو المشغلين، ونوع الوسائط اختيارية و all سوف يكون ضمنيا نوع.
يمكنك أيضا أن يكون الأنماط المختلفة لمختلف وسائل الإعلام:
<link rel="stylesheet" media=" mediatype and|not|only ( expressions )"
href=" print.css ">أنواع CSS3 وسائل الإعلام
| القيمة | وصف |
|---|---|
| all | تستخدم لجميع الأجهزة نوع الوسائط |
| يستخدم للطابعات | |
| screen | تستخدم لشاشات الكمبيوتر، وأقراص، والهواتف الذكية الخ |
| speech | تستخدم لقراءة الشاشة أن "يقرأ" صفحة بصوت عال |
وسائل الإعلام الاستفسارات أمثلة بسيطة
طريقة واحدة لاستخدام استفسارات وسائل الإعلام هو أن يكون هناك قسم CSS بديل حق داخل ورقة نمط حياتك.
يغير المثال التالي background-color لlightgreen إذا كان العرض هو 480 بكسل أو على نطاق أوسع (إذا كان العرض أقل من 480 بكسل، و background-color سيكون ردي):
مثال
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
انها محاولة لنفسك » يظهر المثال التالي القائمة التي سوف تطفو على الجهة اليسرى من الصفحة إذا كان العرض هو 480 بكسل أو على نطاق أوسع (إذا كان العرض أقل من 480 بكسل، فإن القائمة ستكون على رأس المحتوى):
مثال
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left:216px;}
}
انها محاولة لنفسك » CSS3 @media المرجعي
لمحة كاملة عن أنواع جميع وسائل الإعلام والميزات / التعابير، يرجى إلقاء نظرة على @media حكم في إشارة CSS لدينا.