تخطيط الشاشة المنقسمة

جزء من قسم Practical Frontend في رحلة HTML على Coddy — الدرس 29 من 35.

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

أولاً، لنقم بإنشاء هيكل HTML:

<div class="split-screen">
  <div class="split-screen__left">
    <h2>Left Side</h2>
    <p>This is the left side content.</p>
  </div>
  <div class="split-screen__right">
    <h2>Right Side</h2>
    <p>This is the right side content.</p>
  </div>
</div>

الآن، دعنا نضيف CSS لإنشاء تخطيط الشاشة المنقسمة الخاص بنا:

.split-screen {
  display: flex;
  flex-direction: column;
}

/* على الهاتف المحمول، يتم تكديس الأقسام عمودياً */
.split-screen__left {
  background-color: #f0f0f0;
}

.split-screen__right {
  background-color: #e0e0e0;
}

/* على الشاشات الأكبر، يتم عرضها جنباً إلى جنب */
@media (min-width: 768px) {
  .split-screen {
    flex-direction: row;
  }
  
  .split-screen__left,
  .split-screen__right {
    flex: 1;
  }
}

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

محتوى التحدي:

أنشئ تخطيط شاشة منقسمة مستجيباً لعرض منتج. يجب أن يعرض الجانب الأيسر معلومات المنتج، ويجب أن يعرض الجانب الأيمن صورة المنتج.

المتطلبات:

يجب أن تكون الشاشة المنقسمة رأسية على الأجهزة المحمولة (أقل من 768px) وأفقية على الشاشات الأكبر
يجب أن يكون للجانب الأيسر خلفية داكنة (#222) ونص أبيض
يجب أن يكون للجانب الأيمن خلفية فاتحة (#f5f5f5)
أضف حشوة (padding) بمقدار 2rem لكلا الجانبين
على الشاشات الأكبر من 768px، يجب أن يشغل الجانب الأيسر 40% من العرض والجانب الأيمن 60%

التحدي

سهل

لقد تم تزويدك بصفحة HTML تحتوي على قسمين منسقين بأسلوب الهاتف أولاً (mobile-first). مهمتك هي تحويلها إلى Split Screen Layout يعمل بشكل جيد على أجهزة الكمبيوتر المكتبية.

على الشاشات الأكبر (min-width: 768px)، قم بعرضهما جنباً إلى جنب.
امنح الجانب الأيسر لون خلفية rgb(74, 144, 226) ولون نص rgb(255, 255, 255).
امنح الجانب الأيمن لون خلفية rgb(255, 255, 255) ولون نص rgb(51, 51, 51).

ورقة مرجعية

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

هيكل HTML:

<div class="split-screen">
  <div class="split-screen__left">
    <h2>Left Side</h2>
    <p>This is the left side content.</p>
  </div>
  <div class="split-screen__right">
    <h2>Right Side</h2>
    <p>This is the right side content.</p>
  </div>
</div>

CSS لتخطيط الشاشة المنقسمة المتجاوب:

.split-screen {
  display: flex;
  flex-direction: column;
}

/* الجوال: تترتب الأقسام عمودياً */
.split-screen__left {
  background-color: #f0f0f0;
}

.split-screen__right {
  background-color: #e0e0e0;
}

/* الشاشات الأكبر: العرض جنباً إلى جنب */
@media (min-width: 768px) {
  .split-screen {
    flex-direction: row;
  }
  
  .split-screen__left,
  .split-screen__right {
    flex: 1;
  }
}

يبدأ التخطيط ككدسة عمودية على أجهزة الجوال باتباع نهج "الجوال أولاً" (mobile-first)، ثم يتغير إلى تقسيم أفقي على الشاشات التي يبلغ عرضها 768 بكسل أو أكبر.

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
  <title>Split Screen Layout</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
    }

    .container {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    .left,
    .right {
      padding: 3rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .left h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }

    .right h2 {
      margin-bottom: 1rem;
    }

    form {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 300px;
    }

    input {
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    button {
      padding: 10px;
      border: none;
      background: #4a90e2;
      color: white;
      font-weight: bold;
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.3s;
    }

    button:hover {
      background: #357ab7;
    }

    @media (min-width: 768px) {
     
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">
      <h1>Welcome!</h1>
      <p>Discover new opportunities, connect with others, and grow with us.</p>
    </div>
    <div class="right">
      <h2>Sign Up</h2>
      <form>
        <input type="text" placeholder="Your Name">
        <input type="email" placeholder="Your Email">
        <button type="submit">Join Now</button>
      </form>
    </div>
  </div>
</body>
</html>