تصف تنسيقات الماكرو التنظيم الأكبر على مستوى الصفحة للواجهة.
قبل تطبيق أي تخطيط، فيجب أن تتأكد من أن تدفق المحتوى لديك منطقي. هذا الترتيب التلقائي لعمود واحد هو ما ستحصل عليه الشاشات الأصغر حجمًا.
<body>
<header>…</header>
<main>
<article>…</article>
<aside>…</aside>
</main>
<footer>…</footer>
</body>
عندما ترتب هذه المكونات الفردية على مستوى الصفحة، بتصميم تخطيط مكرو: عرض عالي المستوى لصفحتك. باستخدام الاستعلامات عن الوسائط، يمكنك تقديم قواعد في CSS تصف كيفية ضبط طريقة العرض هذه لأحجام الشاشات المختلفة.
شبكة
تعد شبكة CSS أداة ممتازة لتطبيق تنسيق على صفحتك. في المثال أعلاه، لنفترض أنك تريد تخطيطًا من عمودين بمجرد توفر عرض كافٍ للشاشة. لتطبيق هذا التخطيط من عمودين بمجرد أن يكون المتصفح واسعًا بما يكفي، استخدام استعلام وسائط لتحديد أنماط الشبكة فوق نقطة توقف محددة.
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
إطار مرن
بالنسبة إلى هذا التنسيق تحديدًا، يمكنك أيضًا استخدام 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.
التحقق من فهمك
اختبر معلوماتك حول تنسيقات الماكرو.
ما هي الجملة التي تصف التخطيطات الماكرو بشكل أفضل؟
هل تستخدم تنسيقات الماكرو دائمًا استعلامات الوسائط للتكيف مع أحجام الشاشات المختلفة؟
الآن بعد أن حصلت على بعض الأفكار لتخطيطات الماكرو على مستوى الصفحة، لفت انتباهك إلى المكونات داخل الصفحة. هذا هو عالم تنسيقات دقيقة.