ما هو التصميم المتجاوب؟

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 61 من 76.

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

يتم تحقيق التصميم المتجاوب من خلال مجموعة من التقنيات، بما في ذلك:

الشبكات والتخطيطات المرنة: استخدام CSS grid أو Flexbox لإنشاء تخطيطات يمكنها التكيف مع أحجام الشاشات المختلفة.

صور ووسائط مرنة: التأكد من أن الصور والوسائط الأخرى يتغير حجمها بشكل متناسب مع التخطيط.

استعلامات الوسائط (Media queries): تطبيق أنماط CSS مختلفة بناءً على خصائص الجهاز، مثل عرض الشاشة، وارتفاعها، واتجاهها.

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

التحدي

سهل

لقد تم تزويدك بمستند HTML يحتوي على عنوان (<h1>)، وفقرة (<p>)، وصورتين (<img>). مهمتك هي إضافة بعض تنسيقات CSS الأساسية لجعل العناصر مستجيبة وتوضيح الفرق بوضوح بين الارتفاع الثابت والارتفاع التلقائي. اتبع الخطوات التالية:

اكتب قاعدة CSS تستهدف عنصر <h1>. قم بتعيين font-size إلى 5vw. سيؤدي ذلك إلى جعل حجم خط العنوان مستجيباً لعرض نافذة العرض (viewport).
اكتب قاعدة CSS تستهدف عنصر <p>. قم بتعيين font-size إلى 3vw. سيؤدي ذلك إلى جعل حجم خط الفقرة مستجيباً لعرض نافذة العرض.
اكتب قاعدة CSS تستهدف فئة .fixed-height. قم بتعيين width إلى 100% و height إلى 150px. سيؤدي ذلك إلى إنشاء صورة مشوهة عن طريق فرض ارتفاع ثابت.
اكتب قاعدة CSS تستهدف فئة .auto-height. قم بتعيين width إلى 100% و height إلى auto. سيؤدي ذلك إلى جعل الصورة يتغير حجمها بشكل متناسب مع الحفاظ على نسبة العرض إلى الارتفاع (aspect ratio).
اكتب قواعد CSS للحاويات (.container) لمنحها width بقيمة 300px، و border بقيمة 2px solid #ccc، و margin بقيمة 20px، و padding بقيمة 10px.

ورقة مرجعية

يُنشئ التصميم المتجاوب صفحات ويب تتكيف مع مختلف الأجهزة وأحجام الشاشات من خلال التخطيطات المرنة، والوسائط القابلة للتوسع، واستعلامات الوسائط (media queries).

التقنيات الأساسية للتصميم المتجاوب:

الشبكات والتخطيطات المرنة: استخدام CSS Grid أو Flexbox
الصور والوسائط المرنة: تغيير الحجم بشكل متناسب مع التخطيط
استعلامات الوسائط (Media queries): تطبيق أنماط مختلفة بناءً على خصائص الجهاز

استخدم وحدات عرض المنفذ (viewport units) للخطوط المتجاوبة:

h1 {
  font-size: 5vw;
}

p {
  font-size: 3vw;
}

اجعل الصور متجاوبة مع تغيير الحجم بشكل صحيح:

/* ارتفاع ثابت - يسبب تشوهاً */
.fixed-height {
  width: 100%;
  height: 150px;
}

/* ارتفاع تلقائي - يحافظ على نسبة العرض إلى الارتفاع */
.auto-height {
  width: 100%;
  height: auto;
}

جرّب بنفسك

<html>
<head>
    <title>What is Responsive Design?</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>Mount Everest: The World's Highest Peak</h1>
    <p>Mount Everest, standing at 8,848.86 meters (29,031.7 feet), is the tallest mountain on Earth. Located in the Himalayas on the border between Nepal and Tibet, it attracts climbers from around the world. Scaling Everest is a challenging journey due to its extreme weather, thin air, and rough terrain.</p>
    
    <div class="container">
        <h3>Fixed Height (Distorted)</h3>
        <img class="fixed-height" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006.jpg" alt="Distorted Image">
    </div>
    
    <div class="container">
        <h3>Auto Height (Preserved Aspect Ratio)</h3>
        <img class="auto-height" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006.jpg" alt="Proper Ratio Image">
    </div>
</body>
</html>