30 lines
2.0 KiB
Markdown
30 lines
2.0 KiB
Markdown
|
---
|
||
|
title: Media Queries
|
||
|
localeTitle: تساؤلات الإعلام
|
||
|
---
|
||
|
#### واقترح ريدينج:
|
||
|
|
||
|
[استخدام استعلامات الوسائط - مستندات ويب MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
|
||
|
|
||
|
راجع أيضًا قسم [مبادئ تصميم الويب سريع الاستجابة](https://github.com/freeCodeCamp/freeCodeCamp/blob/staging/seed/challenges/01-responsive-web-design/responsive-web-design.json) في الإصدار التجريبي
|
||
|
|
||
|
#### مشروع المادة:
|
||
|
|
||
|
استعلامات الوسائط هي مجموعات من القواعد التي تحدد خصائص CSS. يمكنك تعيين استعلامات الوسائط لتغيير مظهر المحتوى الخاص بك بناءً على كيفية عرض المحتوى الخاص بك.
|
||
|
|
||
|
يمكن أن تحدد استعلامات الوسائط مظهر المحتوى الخاص بك في شاشات مختلفة. بعض الأمثلة على شاشات العرض المختلفة هي: الصور على شاشة الكمبيوتر ، أو النص المطبوع ، أو صفحات الويب في قارئ الشاشة الصوتي.
|
||
|
|
||
|
في صفحات الويب ، قد لا يتم عرض بعض العناصر باستمرار عبر أحجام مختلفة للشاشة. يمكنك استخدام استعلامات الوسائط لتعيين قواعد خاصة للشاشات الصغيرة والكبيرة.
|
||
|
|
||
|
إليك مثال لاستعلام الوسائط يقوم بتعيين حجم النص الأساسي على شاشة الهاتف:
|
||
|
|
||
|
`@media screen and (max-width: 450px) {
|
||
|
body {
|
||
|
font-size: 12px;
|
||
|
}
|
||
|
}
|
||
|
`
|
||
|
|
||
|
وينص استبيان الوسائط هذا على أنه بالنسبة لأحجام الشاشات التي يصل عرضها إلى 450 بكسل ، يجب أن يتم عرض نص النص بحجم 12px.
|
||
|
|
||
|
يمكن أن تكون استعلامات الوسائط مفيدة في [تصميم الويب سريع الاستجابة](https://guide.freecodecamp.org/html/responsive-web-design) .
|