CSS

Part 10 الاستجابة (Responsive Design) في CSS – سلسلة FSWD -CSS

ahmedمنذ 4 أسابيع

0 149 4 دقائق

الاستجابة (Responsive Design) في CSS

الاستجابة في تصميم الويب هي عملية تعديل تخطيط وتصميم الموقع بناءً على حجم الشاشة أو الجهاز المستخدم. هذا يعني أن الموقع سيكون مرنًا ويعرض المحتوى بطريقة مناسبة سواء على شاشات الهواتف المحمولة أو الأجهزة اللوحية أو الشاشات الكبيرة. أهم الأدوات التي تساعد في إنشاء تصميم استجابة هي الميديا كويريز (Media Queries) وتقنيات مثل Flexbox و Grid.

1. الميديا كويريز (Media Queries)

الميديا كويريز هي أدوات تسمح لك بتطبيق أنماط CSS مختلفة بناءً على خصائص الجهاز أو عرض الشاشة. وهي جزء أساسي في تصميم المواقع التفاعلية المتوافقة مع أجهزة متعددة.

1.1 مبدأ “Mobile First”

مبدأ Mobile First يعني تصميم الموقع أولاً ليكون مناسبًا للأجهزة المحمولة، ثم إضافة الأنماط اللازمة للأجهزة الأكبر حجمًا. وهذا يساعد في تحسين أداء الموقع على الهواتف المحمولة.

1.2 تركيب الميديا كويريز

يمكنك استخدام الميديا كويريز لتحديد أنماط CSS مختلفة بناءً على خصائص مثل عرض الشاشة أو دقة الشاشة أو نوع الجهاز.

التركيب الأساسي للميديا كويري

@media (الشرط) {
    /* أنماط CSS هنا */
}

1.3 أمثلة على الميديا كويريز:

تحديد الأنماط للأجهزة المحمولة

@media (max-width: 768px) {
    /* الأنماط المخصصة للشاشات التي عرضها أقل من أو يساوي 768px */
    body {
        background-color: lightblue;
    }
}

تحديد الأنماط للأجهزة اللوحية (بحد أقصى 1024px)

@media (max-width: 1024px) {
    /* الأنماط المخصصة للأجهزة اللوحية */
    .container {
        padding: 20px;
    }
}

تحديد الأنماط للأجهزة الكبيرة

@media (min-width: 1200px) {
    /* الأنماط المخصصة للشاشات الكبيرة */
    .container {
        max-width: 1200px;
    }
}

1.4 الميديا كويري مع أكثر من شرط

يمكنك دمج أكثر من شرط باستخدام and و or لزيادة التحديد.

مثال

@media (max-width: 768px) and (orientation: portrait) {
    /* الأنماط المخصصة للأجهزة التي عرضها أقل من 768px وفي وضع عمودي */
    .menu {
        display: none;
    }
}

2. تقنيات الاستجابة باستخدام Flexbox و Grid

Flexbox و Grid هما تقنيتان قويتان لإنشاء تخطيطات استجابة. يمكن استخدامهما لضبط ترتيب العناصر وتنظيمها بحيث تتكيف مع أحجام الشاشات المختلفة.

2.1 استخدام Flexbox للاستجابة

Flexbox يجعل من السهل ترتيب العناصر بشكل ديناميكي، خاصة عند التعامل مع تغييرات الحجم في الحاوية. إليك كيفية استخدامه مع الميديا كويريز:

مثال

/* حاوية Flexbox */
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.item {
    flex: 1 1 200px;  /* العناصر تأخذ 1 جزء من المساحة المتاحة مع حد أدنى 200px */
    background-color: lightcoral;
    margin: 10px;
}

/* للموبايل (أقل من 768px) */
@media (max-width: 768px) {
    .container {
        flex-direction: column;  /* تغيير الاتجاه إلى عمودي على الشاشات الصغيرة */
    }
}

HTML

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

في هذا المثال، flex-wrap: wrap يسمح للعناصر بالالتفاف عند الحاجة، و flex: 1 1 200px يحدد أن العناصر يجب أن تأخذ مساحة متساوية ولكن بحد أدنى 200px.
في الميديا كويري، يتم تغيير الاتجاه إلى عمودي على الشاشات التي عرضها أقل من 768px.

2.2 استخدام Grid للاستجابة

CSS Grid يسمح بإنشاء تخطيطات معقدة يمكن تعديلها بسهولة باستخدام الميديا كويريز لتناسب الشاشات المختلفة.

مثال

/* حاوية Grid */
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3 أعمدة متساوية */
    gap: 20px;
}

/* للموبايل (أقل من 768px) */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;  /* عمود واحد للموبايل */
    }
}

HTML

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

هنا، حاوية .container تحتوي على 3 أعمدة باستخدام grid-template-columns: repeat(3, 1fr). لكن في حالة الشاشات الصغيرة (أقل من 768px)، يتم تعديل الميديا كويري لجعل الأعمدة تتغير إلى عمود واحد.

مثال كامل لتصميم استجابة باستخدام الميديا كويريز و Flexbox و Grid

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال على التصميم الاستجابة</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <header>
        <h1>مرحبًا بك في موقعنا!</h1>
    </header>

    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>

    <footer>
        <p>حقوق الطبع والنشر © 2025</p>
    </footer>

</body>
</html>

CSS (styles.css)

/* أساسيات التصميم */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* الحاوية الرئيسية */
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3 أعمدة متساوية */
    gap: 20px;
    padding: 20px;
}

/* العناصر داخل الحاوية */
.item {
    background-color: #3498db;
    color: white;
    padding: 20px;
    text-align: center;
}

/* تنسيق للرؤوس */
header {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 20px;
}

/* تنسيق للفوتر */
footer {
    background-color: #34495e;
    color: white;
    text-align: center;
    padding: 10px;
}

/* للموبايل (أقل من 768px) */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;  /* عمود واحد للموبايل */
    }
}

/* للأجهزة اللوحية (من 768px إلى 1024px) */
@media (max-width: 1024px) {
    .container {
        grid-template-columns: repeat(2, 1fr);  /* عمودين للأجهزة اللوحية */
    }
}

الشرح:

التخطيط باستخدام Grid:
- .container يحتوي على 3 أعمدة في الشاشات الكبيرة باستخدام grid-template-columns: repeat(3, 1fr)، لكن عند عرض الصفحة على شاشات أقل من 768px، يتم ضبط الميديا كويري لتغيير التخطيط إلى عمود واحد.
التصميم الاستجابة باستخدام الميديا كويريز:
- تم استخدام ميديا كويريز لتغيير تخطيط العناصر بناءً على عرض الشاشة. على الشاشات الصغيرة، يتم تعديل الأعمدة لتكون عمودًا واحدًا، وفي الأجهزة اللوحية، يتم استخدام عمودين.
التطبيق على أجهزة متعددة:
- تم تصميم الموقع باستخدام مبدأ Mobile First، مما يعني أن التصميم الأساسي يناسب الشاشات الصغيرة، ثم يتم تعديل الأنماط للأجهزة الأكبر باستخدام الميديا كويريز.

نصائح لتصميم استجابة:

استخدام الميديا كويريز بحكمة:
- احرص على إضافة الميديا كويريز بحيث تتأكد من أن الموقع يناسب جميع أحجام الشاشات دون التأثير على تجربة المستخدم.
اختبار التصميم على جميع الأجهزة:
- تأكد من اختبار التصميم على الأجهزة المختلفة (هواتف، لوحات، شاشات كبيرة) للتأكد من أن المحتوى يتم عرضه بشكل مناسب.
تحسين الأداء:
- استخدم الصور المصغرة (responsive images) وطرق التحميل الكسول (lazy loading) لتحسين أداء الموقع على الأجهزة المحمولة