التصميم المرن: مبادئ البناء والفرق عن التصميم المتكيف

ما هو التصميم المرن

التصميم المرن (liquid layout, fluid layout) — نهج تنسيق يتم فيه تحديد أحجام العناصر بوحدات نسبية بدلاً من البكسل الثابت. هذا يسمح للصفحة بالتدرج مع نافذة المتصفح دون تمرير أفقي.

نشأ مفهوم التنسيق المرن في عصر شاشات المكتب بمختلف درجات الدقة. في العقد الأول من القرن الحادي والعشرين، كانت المواقع ذات العرض الثابت 960 بكسل تبدو سيئة على شاشات 15 و 30 بوصة. حل التصميم المرن هذه المشكلة.

وفقًا لـ Web Almanac (2024)، يستخدم 78% من المواقع الحديثة عناصر من التنسيق المرن عبر الوحدات النسبية. التصاميم المرنة البحتة أقل شيوعًا — خاصة في لوحات التحكم ولوحات البيانات.

السياق التاريخي

أصبح التنسيق المرن شائعًا بعد نشر مقال John Allsopp «A Dao of Web Design» في عام 2000، حيث دعا إلى التخلي عن البكسل الثابت لصالح الوحدات النسبية. وضع هذا البيان الأساس الفلسفي لكل التصميم المتجاوب.

وحدات القياس النسبية: النسب المئوية، vw، vh

الوحدات النسبية الرئيسية في CSS تنقسم إلى مجموعتين: نسبة إلى العنصر الأب (النسب المئوية) ونسبة إلى viewport (vw، vh، vmin، vmax). كل مجموعة تحل مهامها الخاصة في التنسيق المرن.

/* Percent — width relative to parent */
.sidebar {
    width: 30%;
}

.content {
    width: 70%;
}

/* vw/vh — viewport-based units */
.hero-section {
    width: 100vw;
    height: 80vh;
}

.fullscreen-modal {
    width: 90vmin;
}

النسب المئوية تُحسب نسبة إلى عرض الحاوية الأم. النسب المئوية المتداخلة يمكن أن تنشئ حسابات متتالية تعطي أحيانًا نتائج غير متوقعة. وحدات vw/vh مرتبطة بـ viewport وتتجاهل الحاويات الأم — وهذا مناسب للأقسام ذات الشاشة الكاملة.

وحدة rem للخطوط

في التنسيق المرن، من المهم ليس فقط تحديد عرض الكتل بوحدات نسبية، ولكن أيضًا حجم الخط. وحدة rem (root em) تربط حجم النص بالعنصر الجذر HTML. بتغيير font-size في html، يمكنك تغيير حجم كل النص في الصفحة.

/* Global text scaling via rem */
html {
    font-size: 62.5%; /* 1rem = 10px */
}

.heading {
    font-size: 2.4rem; /* = 24px */
}

.body-text {
    font-size: 1.6rem; /* = 16px */
}

التصميم المرن مقابل المتكيف

الفرق الرئيسي بين التصميم المرن والمتكيف هو طبيعة تغيير العرض. التصميم المرن يتغير باستمرار مع أي تغيير في حجم النافذة، بينما التصميم المتكيف يتغير بشكل متقطع عبر media queries.

التصميم المرن هو تدرج مستمر، التصميم المتكيف هو التبديل بين القوالب الثابتة. لكل نهج نقاط قوة وضعف.

عمليًا، معظم المواقع الحديثة تستخدم نهجًا هجينًا: شبكة مرنة بوحدات نسبية + media queries لنقاط التوقف الحرجة. التصميم المرن البحت بدون media queries قد يبدو غير مرتب على الشاشات الواسعة جدًا أو الضيقة جدًا.

كيفية تنفيذ التنسيق المرن في CSS

التنفيذ الأساسي للتصميم المرن يشمل ثلاثة مكونات: وحدات عرض نسبية، قيود قصوى/دنيا، و flexbox أو grid لتوزيع المساحة.

/* Fluid grid with Flexbox */
.container {
    display: flex;
    flex-wrap: wrap;
}

.card {
    flex: 1 1 30%;
    min-width: 250px;
}

/* Fluid grid with CSS Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

نهج Flexbox مع flex: 1 1 30% ينشئ بطاقات تشغل حوالي 30% من عرض الحاوية ولكن يمكن أن تضيق حتى 250px. عندما يكون هناك بطاقات كثيرة، تنتقل إلى السطر التالي. نهج Grid مع auto-fit و minmax ينشئ تلقائيًا أعمدة تناسب الحاوية.

القيود: min-width و max-width

المشكلة الرئيسية للتصميم المرن البحت هي أنه على الشاشات الواسعة جدًا، يتمدد سطر النص إلى أكثر من 2000 بكسل، مما يجعل القراءة مستحيلة. خصائص CSS min-width و max-width تحل هذا.

/* Container limits for readability */
.content-wrapper {
    width: 90%;
    max-width: 1200px;
    min-width: 320px;
    margin: 0 auto;
}

max-width: 1200px يمنع تمدد المحتوى على الشاشات فائقة الاتساع. min-width: 320px يضمن حدًا أدنى لعرض الحاوية على الشاشات الصغيرة. مزيج width: 90% + max-width ينشئ حاوية مرنة بسقف — النمط الأكثر شيوعًا في تصميم الويب الحديث.

وفقًا لـ HTTP Archive (2025)، 92% من المواقع في أفضل 1000 تستخدم max-width لكتل المحتوى. القيمة القياسية هي 1140–1200 بكسل لتصاميم سطح المكتب.

النهج الهجين: مرن + متكيف

تصميم الويب الحديث نادرًا ما يستخدم النهج المرن أو المتكيف بشكله النقي. الطريقة الهجينة تجمع مزايا كليهما: شبكة مرنة بوحدات نسبية + media queries لإعادة الهيكلة العالمية.

/* Hybrid: fluid base + media query */
.layout {
    display: grid;
    grid-template-columns: 1fr 3fr;
}

@media (max-width: 768px) {
    .layout {
        grid-template-columns: 1fr;
    }
}

على سطح المكتب، يستخدم التصميم أعمدة مرنة 1fr و 3fr — يتم الحفاظ على النسبة عند أي عرض للنافذة. على الجوال، تقوم media query بالتبديل إلى مخطط عمود واحد حيث تصطف الأعمدة رأسيًا.

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