51 lines
3.2 KiB
Markdown
51 lines
3.2 KiB
Markdown
|
---
|
||
|
|
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)
|