CSS ɓaɓɓe

CSS2 引入了媒体类型

CSS2 中引入了 @media 规则，它让为不同媒体类型定义不同样式规则成为可能。

例如：您可能有一组用于计算机屏幕的样式规则、一组用于打印机、一组用于手持设备，甚至还有一组用于电视，等等。

للأسف، لم يتم دعم هذه أنواع الإعلام على نطاق واسع باستثناء نوع الإعلام للطباعة.}

أدخل الاستعلامات الإعلامية في CSS3

توسعت استعلامات الإعلام في CSS3 مفهوم أنواع الإعلام في CSS2: فهي لا تبحث عن نوع الجهاز، بل تركز على قدرات الجهاز.

يمكن استخدام الاستعلامات الإعلامية للتحقق من العديد من الأشياء، مثل:

  • عرض النافذة وارتفاعها
  • عرض الجهاز وارتفاعه
  • اتجاه (هل الجهاز اللوحي أو الهاتف المحمول في وضع أفقي أو عمودي)
  • دقة الشاشة

استخدام الاستعلامات الإعلامية هو تقنية شائعة تتيح تقديم جدولات النمط المخصصة للكمبيوترات المكتبية، أجهزة الكمبيوتر المحمولة، الأجهزة اللوحية والهواتف المحمولة (مثل iPhone وAndroid Phone).

دعم المتصفح

الرقم في الجدول يشير إلى دعم الكامل @media أول إصدار من المتصفح الذي يدعم القاعدة.

الصفات
@media 21.0 9.0 3.5 4.0 9.0

نحو استعلام الإعلام

استعلام الإعلام يتكون من نوع إعلام واحد، ويمكن أن يحتوي على تعبيرات واحدة أو أكثر، وتلك التعبيرات يمكن تحويلها إلى صحيح أو خطأ.

@media not|only mediatype و (expressions) {
  كود CSS;
}

إذا كان نوع الإعلام المحدد يتطابق مع نوع الجهاز الذي يعرض المستند، وكل التعبيرات في الاستعلام الإعلامي صحيحة، فإن نتيجة الاستعلام تكون صحيحة. عند وجود استعلام إعلامي صحيح، يتم تطبيق جدول التصفح أو القواعد النمطية، وتبعًا للقواعد العادية للتسلسل.

إلا إذا كنت تستخدم محدد not أو only، فإن نوع الإعلام هو اختياري ويكون بالافتراض all النوع.

يمكنك أيضًا استخدام جدولات استعلامات مختلفة للإعلامات المختلفة:

<link rel="stylesheet" media="mediatype و|لا|فقط (expressions)" href="print.css">

نوع الإعلام CSS3

القيمة الوصف
all لجميع أنواع الأجهزة الإعلامية.
print للآلات الطابعة.
screen للشاشات الحاسوبية، الأجهزة اللوحية، الهواتف الذكية وما إلى ذلك.
speech للقراءة بصوت عالٍ للصفحة

مثال بسيط للاستعلامات الإعلامية

واحدة من طرق استخدام الاستعلامات الإعلامية هي وجود جزء CSS احتياطي داخل جدول التصفح.

السطر التالي في عرض النافذة أكبر من 480 بكسل سيتغير لون الخلفية إلى اللون الأخضر الفاتح (إذا كان عرض النافذة أقل من 480 بكسل، فإن لون الخلفية سيكون باللون الوردي):

مثال

@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;}
}

亲自试一试

更多媒体查询实例

如需更多媒体查询的实例，请访问下一页：CSS MQ 实例。

CSS @media 参考手册

有关所有媒体类型和特性/表达式的完整概述，请查看我们的 CSS 参考中的 @media 规则。