---
title: CSS3 Media Queries
localeTitle: استعلامات الوسائط CSS3
---
## استعلامات الوسائط CSS3

تتيح لك استعلامات الوسائط الحصول على أنماط مختلفة للأجهزة المختلفة / أحجام الشاشات المختلفة. أدّى تقديمهم في CSS3 إلى تخفيف المبنى بشكل كبير من صفحات الويب سريعة الاستجابة.

أفضل طريقة عند تصميم موقع ويب سريع الاستجابة هو التفكير في الجوال أولاً ؛ مما يعني أنك تنشئ صفحتك بدءًا من التصميم والمحتوى من النسخة المحمولة. قد تعتقد أنه باستخدام بعض الأحجام القابلة للتطوير (٪ ، vw أو vh) ، ستتكيف صفحتك بشكل مثالي مع أي جهاز. لكنها لن تفعل ذلك. يمكن لبعض التصميم الأساسي للغاية ، ولكن بالتأكيد ليس للصفحات الأكثر شيوعًا أو تعقيدًا!

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

يجب أن تكون عملية التفكير:

1.  المحتوى الذي يجب إظهاره؟
2.  كيفية التخطيط؟
3.  بحجم؟

### التركيب الأساسي

 `    @media only screen and (min-width: 768px) { 
      p {padding: 30px;} 
    } 
` 

ستحتوي العلامة `p` على مساحة مقدارها 30 بكسل بمجرد أن تصل الشاشة إلى 768 بكسل كحد أدنى.

### بناء جملة AND

 `  @media only screen and (min-height: 768px) and (orientation: landscape) { 
    p {padding: 30px;} 
  } 
` 

ستحتوي العلامة `p` على مساحة مقدارها 30 بكسل بمجرد أن تصل الشاشة إلى 768 بكسل على الأقل ويكون اتجاهها أفقيًا.

### بناء جملة OR

 `    @media only screen and (min-width: 768px), (min-resolution: 150dpi) { 
      p {padding: 30px;} 
    } 
` 

ستحتوي علامة `p` على مساحة مقدارها 30 بكسل بمجرد أن تصل الشاشة إلى 768 بكسل أو يصل دقتها إلى 150 نقطة في البوصة.

### معلومات اكثر

*   [MDN - استعلامات الوسائط](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
*   [W3 Schools -media rule](https://www.w3schools.com/cssref/css3_pr_mediaquery.asp)
*   [المغلق الخدعه الموحدة اجهزه العرض Atricle](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/)
*   \[https://alistapart.com/article/responsive-web-design\](Ethan Marcotte A List Apart Atricle on Responsive Web Design)