3.2 KiB
| title | localeTitle |
|---|---|
| CSS3 Media Queries | استعلامات الوسائط CSS3 |
استعلامات الوسائط CSS3
تتيح لك استعلامات الوسائط الحصول على أنماط مختلفة للأجهزة المختلفة / أحجام الشاشات المختلفة. أدّى تقديمهم في CSS3 إلى تخفيف المبنى بشكل كبير من صفحات الويب سريعة الاستجابة.
أفضل طريقة عند تصميم موقع ويب سريع الاستجابة هو التفكير في الجوال أولاً ؛ مما يعني أنك تنشئ صفحتك بدءًا من التصميم والمحتوى من النسخة المحمولة. قد تعتقد أنه باستخدام بعض الأحجام القابلة للتطوير (٪ ، vw أو vh) ، ستتكيف صفحتك بشكل مثالي مع أي جهاز. لكنها لن تفعل ذلك. يمكن لبعض التصميم الأساسي للغاية ، ولكن بالتأكيد ليس للصفحات الأكثر شيوعًا أو تعقيدًا!
عند تصميم صفحتك للأجهزة الصغيرة ، سوف تركز على المحتوى الرئيسي. على شاشة أكبر ، سيكون عليك إعادة ضبط بعض أحجام الخطوط والهوامش paddings وهلم جرا من أجل الحفاظ على موقعك مريحة وقابلة للقراءة ، ولكنك سوف تحتاج أيضا / تحتاج إلى إضافة المزيد من المحتوى ، تلك التي لم تحكم على الأساسية ، وملء الفراغ الذي تم إنشاؤه بواسطة حجم الشاشة.
يجب أن تكون عملية التفكير:
- المحتوى الذي يجب إظهاره؟
- كيفية التخطيط؟
- بحجم؟
التركيب الأساسي
@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 - استعلامات الوسائط
- W3 Schools -media rule
- المغلق الخدعه الموحدة اجهزه العرض Atricle
-
https://alistapart.com/article/responsive-web-design