الفصل الثامن الميديا كويريز (Media Queries) في CSS

Byahmed nabel كورس CSS

إليك كورس كامل عن الميديا كويريز (Media Queries) في CSS:

1. مقدمة عن الميديا كويريز

  • الميديا كويريز (Media Queries) هي تقنية في CSS تستخدم لتطبيق أنماط (Styles) مختلفة بناءً على خصائص الجهاز، مثل الحجم أو الدقة أو الاتجاه.
  • تُستخدم الميديا كويريز بشكل رئيسي في تصميم المواقع المتجاوبة (Responsive Design) لضبط التنسيق استنادًا إلى حجم الشاشة أو الجهاز المستخدم.

2. مفهوم الميديا كويريز

  • الميديا كويريز هي طريقة لتحديد القواعد التي يمكن تطبيقها عندما تتوافق خصائص الجهاز (مثل عرض الشاشة أو دقة الشاشة) مع شروط معينة.
  • على سبيل المثال، يمكن استخدام ميديا كويريز لتغيير تصميم الصفحة استنادًا إلى حجم الشاشة (مثل الهواتف أو أجهزة الكمبيوتر المحمولة).

3. الهيكل الأساسي للميديا كويري

  • الشكل الأساسي للميديا كويري هو استخدام @media متبوعًا بشرط الميديا (مثل عرض الشاشة أو دقتها).

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

css
@media (condition) {
/* CSS rules */
}
  • مثال:
    css
    @media (max-width: 768px) {
    body {
    background-color: lightblue;
    }
    }
  • في هذا المثال، سيتم تطبيق اللون الخلفي lightblue عندما يكون عرض الشاشة أقل من أو يساوي 768 بكسل.

4. الخصائص المشتركة في الميديا كويريز

  • يمكن استخدام عدة خصائص مع الميديا كويريز، مثل:
    • width: عرض الشاشة.
    • height: ارتفاع الشاشة.
    • max-width: أقصى عرض.
    • min-width: الحد الأدنى للعرض.
    • orientation: الاتجاه (عمودي أو أفقي).
    • resolution: دقة الشاشة.
    • aspect-ratio: نسبة العرض إلى الارتفاع.

أ. مثال مع max-width و min-width

css
/* للمقاسات الكبيرة */
@media (min-width: 1200px) {
.container {
width: 1000px;
}
}

/* للمقاسات الصغيرة */
@media (max-width: 768px) {
.container {
width: 100%;
}
}

  • في هذا المثال:
    • إذا كان العرض أكبر من أو يساوي 1200 بكسل، سيتم ضبط عرض العنصر .container ليكون 1000 بكسل.
    • إذا كان العرض أقل من أو يساوي 768 بكسل، سيتم ضبط عرض العنصر .container ليكون 100% من العرض المتاح.

5. أنواع الميديا كويريز الأكثر شيوعًا

أ. التحقق من عرض الشاشة (Width and Height)

  • max-width: تطبيق الأنماط عندما يكون عرض الشاشة أقل من أو يساوي القيمة المحددة.
  • min-width: تطبيق الأنماط عندما يكون عرض الشاشة أكبر من أو يساوي القيمة المحددة.
  • max-height و min-height: لتطبيق الأنماط بناءً على ارتفاع الشاشة.

أمثلة:

css
/* عند عرض أقل من أو يساوي 600px */
@media (max-width: 600px) {
body {
background-color: lightgreen;
}
}

/* عند عرض أكبر من أو يساوي 1024px */
@media (min-width: 1024px) {
body {
background-color: lightcoral;
}
}

ب. التحقق من الاتجاه (Orientation)

  • portrait: عندما يكون الجهاز في وضع عمودي.
  • landscape: عندما يكون الجهاز في وضع أفقي.

مثال:

css
@media (orientation: landscape) {
body {
background-color: yellow;
}
}

ج. التحقق من الدقة (Resolution)

  • يمكنك استخدام الميديا كويريز للتحقق من دقة الشاشة لتطبيق الأنماط على الشاشات عالية الدقة.
  • min-resolution و max-resolution: يتم استخدامها للتحقق من دقة الشاشة.

مثال:

css
@media (min-resolution: 2dppx) {
body {
font-size: 20px;
}
}

6. الجمع بين الميديا كويريز

  • يمكنك جمع عدة شروط في ميديا كويري واحدة باستخدام and أو , (الفاصلة) لدمج شروط متعددة.

أ. استخدام and للجمع بين الشروط

  • and: يستخدم لدمج الشروط بحيث يجب أن تتحقق جميع الشروط معًا.
css
@media (min-width: 600px) and (max-width: 1200px) {
body {
background-color: lightblue;
}
}

ب. استخدام الفاصلة , لدمج الشروط

  • ,: يستخدم لتطبيق الأنماط إذا تم استيفاء أي من الشروط.
css
@media (max-width: 600px), (min-width: 1200px) {
body {
background-color: lightgreen;
}
}

7. الميديا كويريز المتجاوبة (Responsive Media Queries)

  • الميديا كويريز هي جزء أساسي من التصميم المتجاوب (Responsive Design)، حيث يتم تعديل مظهر الصفحة بناءً على جهاز العرض.
  • نموذج شائع:
    • بالنسبة للأجهزة المكتبية (Desktop): عندما يكون عرض الشاشة أكبر من 1024 بكسل.
    • بالنسبة للأجهزة اللوحية (Tablet): عندما يتراوح العرض بين 600px و 1024px.
    • بالنسبة للهواتف المحمولة (Mobile): عندما يكون عرض الشاشة أقل من 600px.

مثال على الميديا كويريز المتجاوبة:

css
/* تصميم للأجهزة المكتبية */
@media (min-width: 1024px) {
.container {
width: 80%;
}
}

/* تصميم للأجهزة اللوحية */
@media (min-width: 600px) and (max-width: 1024px) {
.container {
width: 90%;
}
}

/* تصميم للهواتف المحمولة */
@media (max-width: 600px) {
.container {
width: 100%;
}
}

8. أفضل الممارسات لاستخدام الميديا كويريز

  • ابدأ من التصميم الأكبر: من الأفضل كتابة قواعد CSS الأساسية للموقع لحجم الشاشة الأكبر، ثم استخدم الميديا كويريز للتعديل عند الحاجة.
  • استخدم قيم مرنة مثل em و rem بدلاً من px لتكون أكثر مرونة في التكيف مع أحجام الشاشات المختلفة.
  • اختبر التصميم على الأجهزة المختلفة: تأكد من اختبار الصفحات على أجهزة مختلفة لضمان تجاوب جيد.

9. أمثلة عملية على الميديا كويريز

أ. ميديا كويري لتصميم مخصص لأجهزة مختلفة

HTML:

html
<div class="container">
<p>هذه نصوص يمكن أن تتغير حسب حجم الشاشة.</p>
</div>

CSS:

css
.container {
width: 80%;
margin: 0 auto;
}

@media (max-width: 600px) {
.container {
width: 100%;
}
}

@media (min-width: 600px) and (max-width: 1024px) {
.container {
width: 90%;
}
}

@media (min-width: 1024px) {
.container {
width: 70%;
}
}

ب. إخفاء العناصر على الأجهزة الصغيرة

HTML:

html
<div class="header">
<h1>مرحبًا بك في موقعي</h1>
</div>

CSS:

css
.header {
display: block;
}

@media (max-width: 768px) {
.header h1 {
display: none;
}
}

10. ملخص الدرس

  • تعلمنا كيفية استخدام الميديا كويريز (Media Queries) لتغيير الأنماط بناءً على خصائص الجهاز مثل الحجم أو الاتجاه.
  • قمنا بتطبيق أمثلة عملية على تصميم المواقع المتجاوبة باستخدام ميديا كويريز.
  • تعلمنا كيفية الجمع بين شروط متعددة في ميديا كويري واحدة باستخدام and و ,.

إذا كان لديك أي استفسار أو تحتاج إلى مزيد من الأمثلة حول الميديا كويريز، لا تتردد في سؤالي!

    Similar Posts

    اترك تعليقاً

    لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *