تصف تخطيطات الماكرو البنية الأكبر للواجهة على مستوى الصفحة.
قبل تطبيق أي تخطيط، يجب أن تتأكد من أن تدفق المحتوى لديك منطقي. هذا الترتيب الافتراضي للعمود الواحد هو ما ستحصل عليه الشاشات الأصغر.
<body>
<header>…</header>
<main>
<article>…</article>
<aside>…</aside>
</main>
<footer>…</footer>
</body>
عند ترتيب هذه المكونات الفردية على مستوى الصفحة، فأنت تصمم تخطيط ماكرو: عرض عالي المستوى لصفحتك. باستخدام استعلامات الوسائط، يمكنك تقديم قواعد في CSS تصف كيفية ضبط طريقة العرض هذه مع أحجام الشاشات المختلفة.
معرّف الإصدار العالمي (GRid)
تُعد شبكة CSS أداة ممتازة لتطبيق تخطيط على صفحتك. في المثال أعلاه، لنفترض أنك تريد تخطيطًا من عمودين بمجرد إتاحة عرض شاشة كافٍ. لتطبيق هذا التنسيق المكوَّن من عمودين بعد أن يكون المتصفّح عريضًا بما يكفي، استخدِم الاستعلام عن الوسائط لتحديد أنماط الشبكة فوق نقطة إيقاف محدّدة.
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
Flexbox
بالنسبة إلى هذا التنسيق المحدّد، يمكنك أيضًا استخدام flexbox. ستبدو الأنماط على النحو التالي:
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
مع ذلك، يتطلب إصدار flexbox المزيد من CSS. يحتوي كل عمود على قاعدة منفصلة لوصف مقدار المساحة التي يجب أن يشغلها. في مثال الشبكة، يتم تغليف نفس المعلومات في قاعدة واحدة للعنصر المتضمّن.
هل تحتاج إلى الاستعلام عن الوسائط؟
وقد لا تحتاج دائمًا إلى استخدام الاستعلام عن الوسائط. تعمل الاستعلامات عن الوسائط بشكل جيد عند تطبيق التغييرات على بضعة عناصر، ولكن إذا احتاجت إلى تعديل التنسيق كثيرًا، قد تصبح استعلامات الوسائط غير متاحة مع العديد من نقاط الإيقاف.
لنفترض أن لديك صفحة مليئة بمكونات البطاقة.
لا يتجاوز عرض البطاقات 15em أبدًا، وننصحك بإضافة أكبر عدد ممكن من البطاقات في سطر واحد.
يمكنك كتابة استعلامات عن الوسائط باستخدام نقاط الإيقاف 30em و45em و60em وما إلى ذلك، ولكن هذا الأمر مُمل ويصعب صيانته.
بدلاً من ذلك، يمكنك تطبيق القواعد بحيث تشغل البطاقات نفسها المقدار المناسب من المساحة تلقائيًا.
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
grid-gap: 1em;
}
ويمكنك الحصول على تصميم مشابه باستخدام flexbox. في هذه الحالة، إذا لم تكن هناك بطاقات كافية لملء الصف الأخير، فسيتم توسيع البطاقات المتبقية لملء المساحة المتوفرة بدلاً من وضعها في أعمدة. إذا كنت تريد محاذاة الصفوف والأعمدة، فاستخدم الشبكة.
.cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
}
.cards .card {
flex-basis: 15em;
flex-grow: 1;
}
فمن خلال تطبيق بعض القواعد الذكية في Flexbox أو الشبكة، يمكن تصميم تنسيقات ماكرو ديناميكية باستخدام الحد الأدنى من CSS وبدون أي استعلامات عن الوسائط. وهذا أقل جهد بالنسبة لك - أنت تجعل المتصفح يجري العمليات الحسابية بدلاً من ذلك. للاطّلاع على بعض أمثلة تنسيقات CSS الحديثة التي تكون سلسًا وبدون الحاجة إلى استعلامات عن الوسائط، يُرجى الاطّلاع على 1lineLayouts.com.
التحقّق من استيعابك
اختبر معلوماتك عن التخطيطات الماكرو.
ما الجملة التي تصف تخطيطات الماكرو بشكل أفضل؟
هل تستخدم تنسيقات الماكرو دائمًا الاستعلامات عن الوسائط للتكيف مع أحجام الشاشات المختلفة؟
بعد أن حصلت على بعض الأفكار لتنسيقات الماكرو على مستوى الصفحة، وجِّه انتباهك إلى المكوّنات داخل الصفحة. هذا مجال التنسيقات المصغّرة.