CSS @media
- الصفحة السابقة max-width
- الصفحة التالية min-block-size
التعريف والاستخدام
يُستخدم @media في استعلامات وسائل الإعلام لتطبيق أنماط مختلفة لكل نوع وسائل الإعلام / جهاز.
يمكن استخدام استعلامات وسائل الإعلام للتحقق من العديد من الأمور، مثل:
- عرض وارتفاع المنظور
- عرض جهاز وارتفاعه
- اتجاه (هل الهاتف أو التابلت في وضع الشاشة الأفقية أو العمودية؟)
- حلقة الشاشة
استخدام استعلامات وسائل الإعلام هو تقنية شائعة تُستخدم لتقديم قوائم أسلوب مخصصة إلى أجهزة الكمبيوتر المكتبية، الحواسيب المحمولة، أجهزة التابلت والهواتف المحمولة (تصميم موقع مدمج).
يمكنك أيضًا استخدام استعلامات وسائل الإعلام لتعريف أن بعض الأسلوب ينطبق فقط على مستندات الطباعة أو محولات الشاشة (mediatype: print، screen أو speech).
إضافة إلى أنواع الوسائط، هناك مواصفات الوسائط. توفر مواصفات الوسائط تفاصيل محددة أكثر من خلال السماح لتجربة خصائص وكيل المستخدم أو جهاز العرض المحددة، مما يوفر المزيد من التفاصيل المحددة لاستعلامات وسائط. على سبيل المثال، يمكنك تطبيق النمط فقط على الشاشات أكبر أو أصغر من عرض معين.
يرجى الرجوع أيضًا إلى:
دليل CSS:استعلامات وسائل الاعلام في CSS
دليل CSS:أمثلة على استعلامات وسائط CSS
دليل RWD:تحقيق تصميم الويب الم��ع من خلال استعلامات وسائط
دليل JavaScript:طريقة window.matchMedia()
مثال
مثال 1
إذا كان عرض نافذة المتصفح 600px أو أقل، قم بتغيير لون خلفية عنصر <body> إلى لون "أزرق خفيف":
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
يمكن العثور على أمثلة TIY المزيدية في أسفل الصفحة.
نحو CSS
@media not|only mediatype and (mediafeature and|or|not mediafeature) {
كود CSS;
}
معاني كلمات not، only و and:
not: تقوم كلمة not بتحويل معنى استعلام وسائط كاملاً.
only: تمنع كلمة only تطبيق النمط المحدد من قبل المتصفحات القديمة التي لا تدعم استعلامات وسائط مع مواصفات الوسائط. لا يؤثر عليها المتصفحات الحديثة.
و: كلمة and تربط مواصفات الوسائط ونوع الوسائط أو مواصفات الوسائط الأخرى.
هي اختيارية. ولكن، إذا كنت تستخدم not أو only، فإنه يجب أيضًا تحديد نوع الوسائط.
يمكنك أيضًا استخدام نماذج أنماط مختلفة للوسائط المختلفة، مثل هذا:
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css"> <link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css"> ....
نوع الوسائط
| القيمة | الوصف |
|---|---|
| all | المبدئي. يستخدم لجميع أنواع الأجهزة الوسائطية. |
| للآلات الطابعة. | |
| screen | للشاشات الكمبيوتر، الحواسيب اللوحية، الهواتف الذكية وما إلى ذلك. |
| speech | لقراءة صفحة الويب بصوت |
مواصفات الوسائط
| القيمة | الوصف |
|---|---|
| any-hover |
هل هناك أي نظام إدخال متاح يسمح للمستخدم (بالماوس وما إلى ذلك) بأن يرتفع فوق العنصر؟ تم إضافته في مستوى وسائل الإعلام 4. |
| any-pointer |
هل هناك أي أجهزة إدخال متاحة، إذا كان ذلك الحال، ما هو دقة هذا الجهاز؟ تم إضافته في مستوى وسائل الإعلام 4. |
| مقياس النسبة | min-color |
| min-color-index |
min-height min-monochrome |
| min-resolution |
color تم إضافته في مستوى وسائل الإعلام 4. |
| color-gamut |
color-index device-aspect-ratio |
| device-height |
device-width hover |
| display-mode |
forced-colors hover |
| grid |
height hover |
| inverted-colors |
light-level max-aspect-ratio |
| max-color |
max-color-index تم إضافته في مستوى وسائل الإعلام 5. |
| max-height | max-monochrome |
| max-resolution | min-aspect-ratio |
| min-color |
min-color-index تم إضافته في مستوى وسائل الإعلام 4. |
| min-height |
min-monochrome تم إضافته في مستوى وسائل الإعلام 5. |
| min-resolution |
color تم إضافته في مستوى وسائل الإعلام 5. |
| color-gamut | color-index |
| device-aspect-ratio | device-height |
| device-width | display-mode |
| forced-colors | grid |
| height | hover |
| inverted-colors | light-level |
| max-width | max-aspect-ratio |
| max-color | max-color-index |
| max-height | max-monochrome |
| max-resolution | min-aspect-ratio |
| min-color | min-color-index |
| min-height | min-monochrome |
| min-resolution | أقل دقة للجهاز، باستخدام dpi أو dpcm. |
| min-width | أقل عرض للمنطقة العرضية، مثل نافذة المتصفح. |
| monochrome |
عمق البت لكل بكسل في حافظة الإطار المونوخromatic للجهاز. إذا لم يكن الشاشة للجهاز أبيض وأسود، فإن القيمة تكون 0. |
| orientation | اتجاه دوران النافذة (viewport) (وضع أفقي أو عمودي). |
| overflow-block |
كيف تتعامل الأجهزة التي تظهر المحتوى الذي يتدفق في المحور المربع (viewport)؟ تم إضافته في مستوى وسائل الإعلام 4. |
| overflow-inline |
هل يمكن سحب محتوى الذي يتدفق في المحور المتداخل (viewport)؟ تم إضافته في مستوى وسائل الإعلام 4. |
| pointer |
هل هو ميكانيكية الدخول الرئيسية جهاز إشارة؟ إذا كان ذلك الحال، ما هي دقةها؟ تم إضافته في مستوى وسائل الإعلام 4. |
| prefers-color-scheme |
كشف ما إذا كان المستخدم يفضل الألوان الفاتحة أو الداكنة في خطة الألوان. تم إضافته في مستوى وسائل الإعلام 5. |
| prefers-contrast |
كشف ما إذا كان المستخدم يطلب من النظام زيادة أو تقليل درجة التباين بين الألوان المشابهة. تم إضافته في مستوى وسائل الإعلام 5. |
| prefers-reduced-motion |
هل يفضل المستخدم أن تكون هناك أقل تأثيرات ديناميكية على الصفحة؟ تم إضافته في مستوى وسائل الإعلام 5. |
| prefers-reduced-transparency |
هل يفضل المستخدم اختيار شفافية أقل؟ تم إضافته في مستوى وسائل الإعلام 5. |
| resolution | دقة الأجهزة التي تظهر، باستخدام dpi أو dpcm. |
| scan | عملية مسح الأجهزة التي تظهر محتوى الأجهزة (مثل التلفزيونات). |
| scripting |
كشف ما إذا كان يمكن استخدام سكربت (مثل JavaScript) أم لا. تم إضافته في مستوى وسائل الإعلام 5. |
| update |
تردد تحديث محتوى الأجهزة التي تحديث نتائج الرسوم. تم إضافته في مستوى وسائل الإعلام 4. |
| width | عرض النافذة (viewport) العرض. |
مزيد من الأمثلة
مثال 2
إذا كان عرض المتصفح 600 بكسل أو أقل، قم بإخفاء العنصر:
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
مثال 3
إذا كان عرض النافذة 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;
}
}
مثال 4
أنشئ قائمة توجيه مرونة (تظهر أفقيًا على الشاشات الكبيرة، وعائديًا على الشاشات الصغيرة):
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
مثال 5
استخدم استعلام وسائل الاعلام لإنشاء تصميم أعمدة مرونقي:
/* عند 992px أو أقل، قم بتقليل الأعمدة من أربعة إلى اثنين */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* عند ما يكون العرض أقل أو يساوي 600 بكسل، اجعل الأعمدة تتراكم بدلاً من التوضع بشكل متوازٍ */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
مثال 6
استخدم استعلام وسائل الاعلام لإنشاء موقع مرونقي:
مثال 7
يمكن أيضًا استخدام استعلام وسائل الاعلام لتغيير تصميم الصفحة بناءً على اتجاه المتصفح. يمكنك كتابة مجموعة من خصائص CSS، وتطبيقها فقط عندما يكون عرض نافذة المتصفح أكبر من طولها (أي اتجاه الشاشة الأفقية).
استخدم لون الخلفية الفاتح الأزرق إذا كان الاتجاه في وضع الشاشة الأفقية:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
مثال 8
استخدم استعلام وسائل الاعلام لضبط لون النص إلى اللون الأخضر عند عرض الوثيقة على الشاشة، ولون الأسود عند الطباعة:
@media screen {
body {
color: green;
}
}
@media print {
body {
color: black;
}
}
مثال 9
قائمة منقسمة بالكوما: استخدم الكوما لإضافة استعلام وسائل الاعلام إلى استعلام وسائل الاعلام الموجود (ويمثل عمليات الجمع OR):
/* عند ما يكون العرض بين 600px و 900px أو أكبر من 1100px - تغيير مظهر <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;
}
}
دعم المتصفح
الرقم في الجدول يشير إلى إصدار المتصفح الأول الذي يدعم @media rule بشكل كامل.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 21 | 9 | 3.5 | 4.0 | 9 |
- الصفحة السابقة max-width
- الصفحة التالية min-block-size
