قاعدة CSS @media

يمكن استخدام قاعدة @media لتحديد أنواع وسائط متعددة في سطر واحد. يجب أن يتبع ذلك قائمة أنواع الوسائط المفصولة بالكوماس وأنماط القواعد المضمرة.

باستخدام قاعدة @media، يمكنك تعريف أنماط مختلفة بناءً على نوع الوسائط المختلفة.

يمكن استخدام @media لتعيين أنماط مختلفة بناءً على حجم الشاشة، خاصة إذا كنت بحاجة إلى تصميم صفحة متجاوبة، فإن @media مفيد جدًا.

عندما تغير حجم المتصفح، يتم إعادة إنشاء الصفحة بناءً على عرض وارتفاع المتصفح.

نحو استخدام قاعدة CSS @media

جملة النحو للقاعدة هي:

@media media type,... {
　　　　/* rules-specific media */
}

يمكنك أيضًا استخدام أنماط CSS مختلفة للعديد من وسائط مختلفة:

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="style.css">

السطر التالي يوضح كيفية استخدام خاصية @media.

@media screen{
body　{
color: #32cd32;
		　　font-family: Arial, sans-serif;
font-size:　14px;
}
}
@media　print　{
body　{
color:　#ff6347;
		　　font-family:　Times,　serif;
font-size:　12pt;
}
}
@media　screen,　print　{
body　{
line-height: 1.2;
}
}

نوع الوسائط

وظيفة الوسائط

مرونة المتصفح

مرونة @media للبrowsers، الأرقام في الجدول التالي تمثل أحدث إصدار من البrowsers يدعم الخاصية؛ جميع البrowsers الشائعة يدعم هذا القانون.

قراءة المزيد

يرجى الرجوع إلى التعليمات التالية:أنواع وسائل الإعلام CSS Media.