CSSmedia القاعدة _

❮ السابق مرجع CSS الكامل التالي ❯

مثال

غيّر لون خلفية العنصر <body> إلى "lightblue" عندما يكون عرض نافذة المتصفح 600 بكسل أو أقل:

@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}

المزيد من الأمثلة "جربها بنفسك" أدناه.

التعريف والاستخدام

تُستخدم @mediaالقاعدة في استعلامات الوسائط لتطبيق أنماط مختلفة لأنواع / أجهزة وسائط مختلفة.

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

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

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

يمكنك أيضًا استخدام استعلامات الوسائط لتحديد أن بعض الأنماط مخصصة فقط للمستندات المطبوعة أو لقارئات الشاشة (نوع الوسائط: طباعة أو شاشة أو كلام).

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

دعم المتصفح

تحدد الأرقام الموجودة في الجدول إصدار المستعرض الأول الذي يدعم قاعدةmedia بشكل كامل.

Property
@media	21	9	3.5	4.0	9

بنية CSS

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
CSS-Code;
}

معنى ليس فقط والكلمات الرئيسية : _

not: لا تعكس الكلمة الأساسية معنى استعلام وسائط بالكامل.

فقط: تمنع الكلمة الأساسية الوحيدة المتصفحات القديمة التي لا تدعم استعلامات الوسائط مع ميزات الوسائط من تطبيق الأنماط المحددة. ليس له تأثير على المتصفحات الحديثة.

و: تجمع الكلمة الرئيسية والكلمة الأساسية بين ميزة وسائط ونوع وسائط أو ميزات وسائط أخرى.

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

يمكنك أيضًا الحصول على أوراق أنماط مختلفة لوسائط مختلفة ، مثل هذا:

أنواع الوسائط

Value	Description
all	Default. Used for all media type devices
print	Used for printers
screen	Used for computer screens, tablets, smart-phones etc.
speech	Used for screenreaders that "reads" the page out loud

ميزات الوسائط

Value	Description
any-hover	Does any available input mechanism allow the user to hover over elements? (added in Media Queries Level 4)
any-pointer	Is any available input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4)
aspect-ratio	The ratio between the width and the height of the viewport
color	The number of bits per color component for the output device
color-gamut	The approximate range of colors that are supported by the user agent and output device (added in Media Queries Level 4)
color-index	The number of colors the device can display
grid	Whether the device is a grid or bitmap
height	The viewport height
hover	Does the primary input mechanism allow the user to hover over elements? (added in Media Queries Level 4)
inverted-colors	Is the browser or underlying OS inverting colors? (added in Media Queries Level 4)
light-level	Current ambient light level (added in Media Queries Level 4)
max-aspect-ratio	The maximum ratio between the width and the height of the display area
max-color	The maximum number of bits per color component for the output device
max-color-index	The maximum number of colors the device can display
max-height	The maximum height of the display area, such as a browser window
max-monochrome	The maximum number of bits per "color" on a monochrome (greyscale) device
max-resolution	The maximum resolution of the device, using dpi or dpcm
max-width	The maximum width of the display area, such as a browser window
min-aspect-ratio	The minimum ratio between the width and the height of the display area
min-color	The minimum number of bits per color component for the output device
min-color-index	The minimum number of colors the device can display
min-height	The minimum height of the display area, such as a browser window
min-monochrome	The minimum number of bits per "color" on a monochrome (greyscale) device
min-resolution	The minimum resolution of the device, using dpi or dpcm
min-width	The minimum width of the display area, such as a browser window
monochrome	The number of bits per "color" on a monochrome (greyscale) device
orientation	The orientation of the viewport (landscape or portrait mode)
overflow-block	How does the output device handle content that overflows the viewport along the block axis (added in Media Queries Level 4)
overflow-inline	Can content that overflows the viewport along the inline axis be scrolled (added in Media Queries Level 4)
pointer	Is the primary input mechanism a pointing device, and if so, how accurate is it? (added in Media Queries Level 4)
resolution	The resolution of the output device, using dpi or dpcm
scan	The scanning process of the output device
scripting	Is scripting (e.g. JavaScript) available? (added in Media Queries Level 4)
update	How quickly can the output device modify the appearance of the content (added in Media Queries Level 4)
width	The viewport width

مزيد من الأمثلة

مثال

إخفاء عنصر عندما يكون عرض المتصفح 600 بكسل أو أقل:

@media screen and (max-width: 600px) {
div.example {
display: none;
}
}

مثال

استخدم mediaqueries لتعيين لون الخلفية إلى الخزامى إذا كان عرض إطار العرض 800 بكسل أو أوسع ، إلى اللون الأخضر الفاتح إذا كان عرض إطار العرض بين 400 و 799 بكسل. إذا كان إطار العرض أصغر من 400 بكسل ، فإن لون الخلفية يكون أزرق فاتح:

body {
  background-color: lightblue;
}

@media screen and (min-width: 400px) {
body {
    background-color: lightgreen;
  }
}

@media screen and (min-width: 800px) {
body {
    background-color: lavender;
}
}

مثال

أنشئ قائمة تنقل سريعة الاستجابة (تُعرض أفقيًا على الشاشات الكبيرة وعموديًا على الشاشات الصغيرة):

@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}

مثال

استخدم استعلامات الوسائط لإنشاء تخطيط عمود سريع الاستجابة:

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
.column {
    width: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

مثال

استخدم استعلامات الوسائط لإنشاء موقع ويب سريع الاستجابة:

مثال

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

استخدم لون خلفية أزرق فاتح إذا كان الاتجاه في الوضع الأفقي:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

مثال

استخدم استعلامات الوسائط لتعيين لون النص إلى اللون الأخضر عند عرض المستند على الشاشة ، وإلى الأسود عند طباعته:

@media screen {
body {
    color: green;
  }
}

@media print {
  body {
    color: black;
  }
}

مثال

قائمة مفصولة بفواصل : أضف استعلام وسائط إضافيًا إلى استعلام موجود بالفعل ، باستخدام فاصلة (سيتصرف هذا كعامل OR):

/* When the width is between 600px and 900px OR above 1100px - change the appearance of <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
}
}