التخطيطات الانسيابية

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

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

المبادئ الأساسية للتخطيطات المرنة تشمل:

الوحدات النسبية: استخدام النسب المئوية (%)، أو وحدات منفذ العرض (vw، vh)، أو ems (em) بدلاً من البكسلات الثابتة (px) للعروض، والارتفاعات، والهوامش، والحشوات.

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

Max-width و min-width: تعيين الحد الأقصى والأدنى لعرض العناصر لمنعها من أن تصبح واسعة جداً أو ضيقة جداً في أحجام الشاشات القصوى.

إليك مثال على تخطيط مرن أساسي باستخدام النسب المئوية:

.container {
    width: 90%; /* تشغل الحاوية 90% من عرض منفذ العرض */
    max-width: 1200px; /* لن تتجاوز الحاوية 1200 بكسل */
}
.sidebar {
    width: 30%; /* يشغل الشريط الجانبي 30% من عرض الحاوية */
    float: left;
}
.main-content {
    width: 70%; /* تشغل منطقة المحتوى الرئيسية 70% من عرض الحاوية */
    float: left;
}

في هذا المثال، العنصر .container يحتوي على عرض مرن بنسبة 90%، مما يعني أنه سيشغل دائماً 90% من عرض منفذ العرض. خاصية max-width محددة بـ 1200px لمنع الحاوية من أن تصبح واسعة جداً على الشاشات الكبيرة.

تمتلك عناصر .sidebar و .main-content عرضاً مرناً بنسبة 30% و 70% على التوالي، مما يسمح لها بالتكيف مع عرض الحاوية.

التحدي

سهل

لديك مستند HTML يحتوي على قسم أب (<div>) يضم قسمين ابنين (<div>) بالفئات sidebar و main. مهمتك هي إنشاء تخطيط مرن (fluid layout) باستخدام النسب المئوية. اتبع الخطوات أدناه:

اكتب قاعدة CSS تستهدف عنصر <div> بالفئة container. اضبط خاصية width الخاصة به على 80% والـ margin على 0 auto. أضف border بقيمة 1px solid black للتوضيح البصري.
اكتب قاعدة CSS تستهدف عنصر <div> بالفئة sidebar. اضبط خاصية width الخاصة به على 25% واجعله يطفو (float) إلى اليسار.
اكتب قاعدة CSS تستهدف عنصر <div> بالفئة main. اضبط خاصية width الخاصة به على 75% واجعله يطفو (float) إلى اليمين.

ورقة مرجعية

يتكيف التخطيط المرن (fluid layout) مع أحجام الشاشات المختلفة باستخدام شبكات مرنة ووحدات نسبية مثل النسب المئوية بدلاً من قيم البكسل الثابتة.

المبادئ الأساسية للتخطيطات المرنة:

الوحدات النسبية: استخدم النسب المئوية (%)، أو وحدات عرض الشاشة (vw، vh)، أو ems (em) بدلاً من البكسلات الثابتة
الشبكات المرنة: استخدم CSS Grid أو Flexbox للتخطيطات القابلة للتكيف
الحد الأقصى للعرض والحد الأدنى للعرض: ضع حدوداً لمنع العناصر من أن تصبح واسعة جداً أو ضيقة جداً

مثال أساسي للتخطيط المرن:

.container {
    width: 90%; /* يشغل 90% من عرض نافذة العرض */
    max-width: 1200px; /* لن يتجاوز 1200 بكسل */
}
.sidebar {
    width: 30%; /* 30% من عرض الحاوية */
    float: left;
}
.main-content {
    width: 70%; /* 70% من عرض الحاوية */
    float: left;
}

جرّب بنفسك

<html>
<head>
    <title>Fluid Layouts</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar" style="background-color:#92f0ab">Sidebar</div>
        <div class="main" style="background-color:#92d4f0">Main Content</div>
    </div>
</body>
</html>