القاعدة ‎`@media`

The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

القاعدة ‎@media في CSS يمكن أن تستعمل لتطبيق الأنماط بناءً على شروط معيّنة (تسمى media queries)، التي تختبر نوع الجهاز، وخصائصه، وبيئة التشغيل.

لاحظ أنَّ بالإمكان وضع القاعدة ‎@media داخل قواعد At-rules الأخرى، مثل القاعدة ‎@supports.

@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

يمكن تطبيق استعلامات الوسائط (media queries) على قواعد ‎@media بالإضافة إلى العنصر <link> في HTML الذي يؤدي إلى جعل صفحة الأنماط كلها تابعة لتحقيق ذاك الشرط.

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen-styles.css">

أمثلة

@media print {
  body { font-size: 10pt; }
}

@media screen {
  body { font-size: 13px; }
}

@media screen, print {
  body { line-height: 1.2; }
}

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (resolution: 150dpi) {
    body { line-height: 1.4; }
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي (أنواع الوسائط all و print و screen)	1.0	1.0	6.0	9.2	1.3
ميزات الوسائط	1.0	1.0	9.0	9.2	1.3
ميزة الوسائط resolution	29.0	3.5	؟	مدعومة	؟

البنية العامة

القاعدة ‎@media تتألف من استعلام أو أكثر عن الوسائط (media queries)، التي يتألف كلٌ منها من نوع وسائط (media type) اختياري، وأي عدد من تعابير ميزات الوسائط (media feature)، يمكن جمع استعلامات الوسائط باستخدام المعاملات المنطقية (logical operators)، وهي غير حساسة لحالة الأحرف.

ستُطبَّق الأنماط المرتبطة باستعلامات الوسائط إذا كانت قيمة الاستعلام هي true، أي أنَّ نوع الوسائط يماثل نوع الجهاز الذي يُعرَض المستند عليه، وكانت نتيجة جميع ميزات الوسائط هي true؛ لاحظ أنَّ الاستعلامات التي فيها أنواع غير معروفة من الوسائط ستكون قيمتها false دومًا.

ملاحظة: صفحات الأنماط المرتبطة مع استعلامات عن الوسائط المُضافة عبر العنصر <link> ستُنزَّل حتى لو كانت نتيجة الاستعلام false، لكن محتوياتها لن تُطبَّق إلا إذا أصبحت نتيجة الاستعلام true.

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

أنواع الوسائط تصف التصنيف العام للجهاز؛ وما لم تستعمل المعاملَين المنطقيَين not أو only، فسيكون نوع الوسائط اختياريًا، وقيمته الافتراضية هي all.

`all`

صفحة الأنماط مناسبة لكل الأجهزة.

`print`

الغرض من هذا النوع هو تطبيق الأنماط على المحتوى المطبوع أو الظاهر على الشاشة في نافذة معاينة الطباعة.

`screen`

الغرض من هذا النوع هو شاشات الحاسوب الملونة.

`speech`

الغرض من هذا النوع هو برمجيات تحويل النص إلى كلام.

ملاحظة: عرَّفَت مواصفة CSS 2.1 و Media Queries 3 عدِّة أنواع وسائط أخرى (وهي tty و tv و projection و handheld و braille و embossed و aural) لكنها أصبحت مهملةً في مواصفة Media Queries 4 ولا يجب استخدامها؛ لاحظ أنَّ النوع aural قد حلّ محلهُ النوع speech.

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

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

ملاحظة: هنالك بعض الميزات التي أُهمِلَت في مواصفة Media Queries Level 4، وهي device-width و device-height و device-aspect-ratio.

`width`

يمكن أن تستخدم ميزة width لتطبيق الأنماط اعتمادًا على عرض إطار العرض (viewport).

تُحدَّد الميزة width كقيمة طولية <length> تُمثِّل عرض إطار العرض، وهذه الميزة يمكن استخدامها كمجال، مما يعني أنَّ بالإمكان استخدام min-width و max-width لتحديد أدنى عرض وأقصى عرض على التوالي وبالترتيب.

<div>Watch this element as you resize your viewport's width.</div>

شيفرة CSS:

/* تحديد العرض */
@media (width: 360px) {
  div {
    color: red;
  }
}

/* أدنى عرض */
@media (min-width: 35rem) {
  div {
    background: yellow;
  }
}

/* أقصى عرض */
@media (max-width: 50rem) {
  div {
    border: 2px solid blue;
  }
}

`height`

يمكن أن تستخدم ميزة height لتطبيق الأنماط اعتمادًا على ارتفاع إطار العرض (viewport).

تُحدَّد الميزة height كقيمة طولية <length> تُمثِّل ارتفاع إطار العرض، وهذه الميزة يمكن استخدامها كمجال، مما يعني أنَّ بالإمكان استخدام min-height و max-height لتحديد أدنى ارتفاع وأقصى ارتفاع على التوالي وبالترتيب.

<div>Watch this element as you resize your viewport's height.</div>

شيفرة CSS:

/* تحديد الارتفاع */
@media (height: 360px) {
  div {
    color: red;
  }
}

/* أدنى ارتفاع */
@media (min-height: 25rem) {
  div {
    background: yellow;
  }
}

/* أقصى ارتفاع */
@media (max-height: 40rem) {
  div {
    border: 2px solid blue;
  }
}

`aspect-ratio`

يمكن أن تستخدم ميزة aspect-ratio لتطبيق الأنماط اعتمادًا على نسبة أبعاد (aspect ratio) إطار العرض (viewport).

تُحدَّد الميزة aspect-ratio كنسبة <radio> تُمثِّل نسبة العرض-إلى-الارتفاع لإطار العرض، وهذه الميزة يمكن استخدامها كمجال، مما يعني أنَّ بالإمكان استخدام min-aspect-ratio و max-aspect-ratio لتحديد أدنى نسبة أبعاد وأقصى نسبة أبعاد على التوالي وبالترتيب.

<div>Watch this element as you resize your viewport's width and height.</div>

شيفرة CSS:

/* تحديد نسبة الأبعاد */
@media (aspect-ratio: 1/1) {
  div {
    color: red;
  }
}

/* أدنى نسبة أبعاد */
@media (min-aspect-ratio: 8/5) {
  div {
    background: yellow;
  }
}

/* أقصى نسبة أبعاد */
@media (max-aspect-ratio: 2/1) {
  div {
    border: 2px solid blue;
  }
}

`orientation`

يمكن أن تستخدم ميزة aspect-ratio لتطبيق الأنماط اعتمادًا على اتجاه إطار العرض (viewport).

ملاحظة: هذه الميزة لا علاقة لها باتجاه الجهاز، إذ إنَّ فتح لوحة المفاتيح في أغلبية الأجهزة بالوضع الرأسي (portrait) سيؤدي إلى جعل عرض إطار العرض أكبر من ارتفاعه مما يؤدي إلى جعل المتصفح يستعمل أنماط landscape بدلًا من portrait.

تقبل الميزة orientation كلمةً محجوزةً من الكلمتين الآتيتين:

portrait: إطار العرض في الوضع الرأسي، أي أنَّ ارتفاعه أكبر أو يساوي عرضه.
landscape: إطار العرض في الوضع الأفقي، أي أنَّ عرضه أكبر من ارتفاعه.

سنستخدم تخطيط flex في المثال الآتي:

<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>

شيفرة CSS:

body {
  display: flex;
}

div {
  background: yellow;
}

@media screen and (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media screen and (orientation: portrait) {
  body {
    flex-direction: column;
  }
}

`resolution`

يمكن أن تستخدم ميزة resolution لتطبيق الأنماط اعتمادًا على كثافة البكسلات في شاشة العرض.

تُحدَّد الميزة resolution كقيمة <resolution> تُمثِّل كثافة البكسلات في الشاشة، وهذه الميزة يمكن استخدامها كمجال، مما يعني أنَّ بالإمكان استخدام min-resolution و max-resolution لتحديد أدنى وأقصى كثافة للشاشة على التوالي وبالترتيب.

<p>This is a test of your device's pixel density.</p>

شيفرة CSS:

/* تحديد كثافة الشاشة */
@media (resolution: 150dpi) {
  p {
    color: red;
  }
}

/* أدنى كثافة */
@media (min-resolution: 72dpi) {
  p {
    font-size: 1.5em;
  }
}

/* أقصى كثافة */
@media (max-resolution: 300dpi) {
  p {
    background: yellow;
  }
}

`scan`

يمكن أن تستخدم ميزة scan لتطبيق الأنماط بناءً على عملية المسح (scanning process) المستخدمة من جهاز العرض، لاحظ أنَّ كلمة «مسح» (scanning) في هذا السياق لا علاقة لها بالماسح الضوئي الذي يحوِّل المستندات المطبوعة إلى رقمية، وإنما تصف العملية التي تُعرَض فيها الصورة على شاشة التلفاز أو الحاسوب.

تقبل الميزة scan كلمةً محجوزةً من الكلمتين الآتيتين:

interlace: المسح المتداخل، أي أنَّ جهاز العرض سيعرض الأسطر الفردية والزوجية بالتبادل، وبعض أجهزة التلفاز تستعمل المسح المتداخل.
progressive: المسح التدريجي، أي أنَّ جهاز العرض سيعرض الأسطر بالترتيب، وجميع شاشات الحاسوب تستخدم المسح التدريجي.

لاحظ كيف سيتغير نوع الخط في المثال الآتي اعتمادًا على طريقة المسح المستخدمة من جهاز العرض:

<p>If your screen uses interlaced rendering, this text should
   be in a sans-serif font. If your screen uses progressive
   scanning, you should see a serif font.</p>

شيفرة CSS:

p {
  font-family: cursive;
}

@media (scan: interlace) {
  p {
    font-family: sans-serif;
  }
}

@media (scan: progressive) {
  p {
    font-family: serif;
  }
}

`grid`

يمكن أن تستخدم ميزة grid لتطبيق الأنماط اعتمادًا على إذا كان جهاز العرض يستعمل شاشة نقطية (bitmap) أو على شكل شبكة (grid، مثل الطرفيات terminals، أو أجهزة بريل braille).

تُحدَّد الخاصية grid باستخدام 0 (جهاز العرض على شكل شبكة) أو 1 (جهاز العرض نقطي).

<p class="unknown">I don't know if you're using a grid device. :-(</p>
<p class="bitmap">You are using a bitmap device.</p>
<p class="grid">You are using a grid device!</p>

شيفرة CSS:

:not(.unknown) {
  color: lightgray;
}

@media (grid: 0) {
  .unknown {
    color: lightgray;
  }

  .bitmap {
    color: red;
  }
}

@media (grid: 1) {
  .unknown {
    color: lightgray;
  }

  .grid {
    color: red;
  }
}

`update`

يمكن أن تستخدم ميزة update لتطبيق الأنماط اعتمادًا على سرعة تعديل جهاز العرض لمظهر المحتويات.

تقبل الميزة update كلمةً محجوزةً من الكلمات الآتية:

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

مثال عن استخدام الخاصية animation لتحريك النص إن كان الجهاز سريعًا:

<p>If this text animates for you, you are using a fast-updating device.</p>

شيفرة CSS:

@keyframes jiggle {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(25px);
  }
}

@media (update: fast) {
  p {
    animation: 1s jiggle linear alternate infinite;
  }
}

`overflow-block`

يمكن أن تستخدم ميزة overflow-block لتطبيق الأنماط اعتمادًا على طريقة تعامل جهاز العرض مع المحتوى الذي يزيد عن الصندوق الكتلي على المحور الطولي.

تقبل الميزة overflow-block كلمةً محجوزةً من الكلمات الآتية:

none: المحتوى الذي يزيد عن الصندوق الكتلي لن يُعرَض.
scroll: يمكن عرض المحتوى الزائد بالتمرير إليه.
optional-paged: يمكن عرض المحتوى بالتمرير إليه، لكن يمكن وضع فاصل يدوي للصفحة لجعل المحتوى يتنقل إلى الصفحة الآتية.
paged: سيُقسَم المحتوى إلى صفحات منفصلة.

مثال:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat, tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend. Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt sed eget ex.</p>

شيفرة CSS:

@media (overflow-block: scroll) {
  p {
    color: red;
  }
}

`overflow-inline`

يمكن أن تستخدم ميزة overflow-inline لتطبيق الأنماط اعتمادًا على طريقة تعامل جهاز العرض مع المحتوى الذي يزيد عن الصندوق الكتلي على المحور السطري (inline).

تقبل الميزة overflow-inline كلمةً محجوزةً من الكلمات الآتية:

none: المحتوى الذي يزيد عن الصندوق الكتلي لن يُعرَض.
scroll: يمكن عرض المحتوى الزائد بالتمرير إليه.

مثال:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac turpis eleifend, fringilla velit ac, aliquam tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc velit erat, tempus id rutrum sed, dapibus ut urna. Integer vehicula nibh a justo imperdiet rutrum. Nam faucibus pretium orci imperdiet sollicitudin. Nunc id facilisis dui. Proin elementum et massa et feugiat. Integer rutrum ullamcorper eleifend. Proin sit amet tincidunt risus. Sed nec augue congue eros accumsan tincidunt sed eget ex.</p>

شيفرة CSS:

@media (overflow-inline: scroll) {
  p {
    color: red;
  }
}

`color`

يمكن أن تستخدم ميزة color لتطبيق الأنماط اعتمادًا على عدد البتات في كل مكوِّن من مكونات اللون (الأحمر والأخضر والأزرق) في جهاز العرض.

تُحدَّد الميزة color كعدد صحيح <integer> يُمثِّل عدد البتات في كل مكوِّن من مكونات اللون (الأحمر والأخضر والأزرق) في جهاز العرض، وهذه الميزة يمكن استخدامها كمجال، مما يعني أنَّ بالإمكان استخدام min-color و max-color لتحديد أدنى وأقصى قيمة على التوالي وبالترتيب.

ملاحظة: إذا كان عدد المكونات اللونية تُمثَّل بعدد مختلف من البتات، فستستخدم أدنى قيمة، فمثلًا لو كان جهاز العرض يخصص 5 بتات لقناة اللون الأزرق والأحمر و 6 بتات للون الأخضر، فسيُعدّ جهاز العرض على أنَّه يستخدم 5 بتات لكل مكوِّن لوني.

<p>How many bits does your device support for color components?</p>

شيفرة CSS:

p {
  color: #000;
}

/* أي جاهز ملوّن */
@media (color) {
  p {
    color: #ff0000;
  }
}

/* أي جهاز ملوّن له على الأقل 8 بتات في كل قناة لونية */
@media (min-color: 8) {
  p {
    color: #35bd19;
  }
}

`pointer`

يمكن أن تستخدم ميزة pointer لتطبيق الأنماط اعتمادًا على دقة مؤشر جهاز الإدخال الرئيسي الذي يستعمله المستخدم.

تقبل الميزة pointer كلمةً محجوزةً من الكلمات الآتية:

none: آلية الإدخال الأساسية لا تتضمن جهاز تأشير.
coarse: آلية الإدخال الأساسية تتضمن جهاز تأشير ذا دقةٍ محدودة.
fine: آلية الإدخال الأساسية تتضمن جهاز تأشير له دقة عالية.

مثال عن صندوق تأشير تتغير أبعاده ولونه اعتمادًا على دقة آلية الإدخال الأساسية (جرِّب هذا المثال عن شاشة حاسوب، وعلى هاتف ذكي):

<input id="test" type="checkbox">
<label for="test">Look at me!</label>

شيفرة CSS:

input[type="checkbox"]:checked {
  background: gray;
}

@media (pointer: fine) {
  input[type="checkbox"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border: 1px solid blue;
  }
}

@media (pointer: coarse) {
  input[type="checkbox"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    border: 2px solid red;
  }
}

`hover`

يمكن أن تستخدم ميزة hover لتطبيق الأنماط اعتمادًا على إمكانية مؤشر جهاز الإدخال الرئيسي الذي يستعمله المستخدم على المرور فوق العناصر.

تقبل الميزة hover كلمةً محجوزةً من الكلمات الآتية:

none: آلية الإدخال الأساسية لا تسمح بالمرور فوق العناصر بالكليّة أو كان سلوك المرور فوق العناصر غير متناسق (فمثلًا بعض متصفحات الهواتف الذكية تحاكي تأثير المرور فوق العناصر عندما يلمسه المستخدم فترةً مطولةً)، أو لم تكن هنالك آلية إدخال أساسية في الجهاز.
hover: آلية الإدخال الأساسية تسمح بالمرور فوق العناصر بشكل متناسق.

مثال عن ذلك:

<a href="#">Try hovering over me!</a>

شيفرة CSS:

@media (hover: hover) {
  a:hover {
    background: yellow;
  }
}

`any-pointer`

يمكن أن تستخدم ميزة any-pointer لتطبيق الأنماط اعتمادًا على دقة مؤشر أي جهاز إدخال يمكن أن يستعمله المستخدم.

تقبل الميزة any-pointer كلمةً محجوزةً من الكلمات الآتية:

none: لا يوجد جهاز تأشير.
coarse: هنالك جهاز تأشير (واحد على الأقل) ذو دقةٍ محدودة.
fine: هنالك جهاز تأشير (واحد على الأقل) له دقة عالية.

لاحظ أنَّ بالإمكان مطابقة أكثر من قيمة وذلك إذا كان هنالك أكثر من جهاز تأشير له خصائص مختلفة.

<input id="test" type="checkbox">
<label for="test">Look at me!</label>

شيفرة CSS:

input[type="checkbox"]:checked {
  background: gray;
}

@media (any-pointer: fine) {
  input[type="checkbox"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border: 1px solid blue;
  }
}

@media (any-pointer: coarse) {
  input[type="checkbox"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    border: 2px solid red;
  }
}

`any-hover`

يمكن أن تستخدم ميزة any-hover لتطبيق الأنماط اعتمادًا على إمكانية مؤشر أي جهاز إدخال يمكن أن يستعمله المستخدم على المرور فوق العناصر.

تقبل الميزة any-hover كلمةً محجوزةً من الكلمات الآتية:

none: لا توجد أيّة آلية إدخال تسمح بالمرور فوق العناصر بشكل متناسق.
hover: توجد آلية إدخال واحدة على الأقل تسمح بالمرور فوق العناصر بشكل متناسق.

مثال عن ذلك:

<a href="#">Try hovering over me!</a>

شيفرة CSS:

@media (any-hover: hover) {
  a:hover {
    background: yellow;
  }
}

المعاملات المنطقية

يمكن أن تستعمل المعاملات المنطقية not و and و only لإنشاء استعلام معقد، ويمكن أيضًا دمج عدِّة استعلامات عن الوسائط في قاعدة واحدة بفصلها بفاصلة.

`and`

يُستخدَم المُعامِل and لدمج ميزتين من ميزات الوسائط في استعلام واحد، ويجب أن يكون ناتج كلا الميزتين true لكي تكون نتيجة الطلبية true، ويُستعمَل هذا المعامل أيضًا لدمج ميزات الوسائط مع أنواع الوسائط.

`not`

يُستخدَم المعامل not لعكس نتيجة الاستعلام، أي سيُعيد true إذا كانت نتيجة الاستعلام false، والعكس صحيح، وإذا استخدم على قائمة مفصولة بفواصل، فسيعكس قيمة الطلبية التي طُبِّق عليها فقط، وإذا استخدمتَ المعامل not فيجب أن تُحدِّد نوع الوسائط.

لاحظ أنَّ الكلمة المحجوزة not لا يمكن أن تستخدم لعكس نتيجة اختبار إحدى الميزات، وإنما كامل استعلام الوسائط.

`only`

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

القوائم المفصولة بفواصل

ستُعامَل الاستعلامات التي يُفصَل بينها بفاصلة بمعزل عن البقية، فلو كانت نتيجة إحدى الاستعلامات true فسيكون كامل الاستعلام true، أي أنَّ القوائم المفصولة بفواصل تشبه المعامل or.

البنية الرسمية

@media <media-query-list> {
  <group-rule-body>
}

حيث:

<media-query-list> = <media-query>#

حيث:

<media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?

حيث:

<media-condition> = <media-not> | <media-and> | <media-or> | <media-in-parens>
<media-type> = <ident>
<media-condition-without-or> = <media-not> | <media-and> | <media-in-parens>

حيث:

<media-not> = not <media-in-parens>
<media-and> = <media-in-parens> [ and <media-in-parens> ]+
<media-or> = <media-in-parens> [ or <media-in-parens> ]+
<media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed>

حيث:

<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )

حيث:

<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value> | <mf-value> [ '<' | '>' ]? '='? <mf-name> | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value> | <mf-value> '>' '='? <mf-name> '>' '='? <mf-value>

حيث:

<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>

انظر أيضًا

صفحة القاعدة supports@ التي تسمح لنا بتعريف قواعد بناءً على دعم المتصفح لميزات مُعيّنة في CSS.

مصادر ومواصفات

مواصفة CSS Conditional Rules Module Level 3.
مسودة Media Queries Level 4.
مواصفة Media Queries.
مواصفة ‎CSS Level 2 (Revision 1)‎.

القاعدة ‎`@media`

محتويات

أمثلة

دعم المتصفحات

البنية العامة

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

`all`

`print`

`screen`

`speech`

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

`width`

`height`

`aspect-ratio`

`orientation`

`resolution`

`scan`

`grid`

`update`

`overflow-block`

`overflow-inline`

`color`

`pointer`

`hover`

`any-pointer`

`any-hover`

المعاملات المنطقية

`and`

`not`

`only`

القوائم المفصولة بفواصل

البنية الرسمية

انظر أيضًا

مصادر ومواصفات

قائمة التصفح

بحث

القاعدة ‎@media

أمثلة

دعم المتصفحات

البنية العامة

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

all

print

screen

speech

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

width

height

aspect-ratio

orientation

resolution

scan

grid

update

overflow-block

overflow-inline

color

pointer

hover

any-pointer

any-hover

المعاملات المنطقية

and

not

only

القوائم المفصولة بفواصل

البنية الرسمية

انظر أيضًا

مصادر ومواصفات

قائمة التصفح

بحث

القاعدة ‎`@media`

`all`

`print`

`screen`

`speech`

`width`

`height`

`aspect-ratio`

`orientation`

`resolution`

`scan`

`grid`

`update`

`overflow-block`

`overflow-inline`

`color`

`pointer`

`hover`

`any-pointer`

`any-hover`

`and`

`not`

`only`