Макромакеты описывают более широкую организацию вашего интерфейса на уровне всей страницы.
Прежде чем применять какой-либо макет, вы должны убедиться, что поток вашего контента имеет смысл. Этот порядок по умолчанию в один столбец — это то, что получат экраны меньшего размера.
<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;
}
Применяя некоторые умные правила во флексбоксе или сетке, можно создавать макеты динамических макросов с минимальным использованием CSS и без каких-либо медиа-запросов. Для вас это меньше работы — вместо этого вы заставляете браузер выполнять вычисления. Чтобы увидеть некоторые примеры современных макетов CSS, которые являются гибкими и не требуют медиа-запросов, посетите 1linelayouts.com .
Проверьте свое понимание
Проверьте свои знания макетов макросов.
Какое предложение лучше всего описывает макеты макросов?
Макросы-макеты всегда используют медиа-запросы для адаптации к разным размерам экрана?
Теперь, когда у вас есть идеи для макетов макросов на уровне страницы, обратите внимание на компоненты на странице. Это царство микромакетов .