Как создавать адаптивные макеты без использования медиазапросов — горячая тема с тех пор, как в мир вошли сетка и гибкий бокс с их способностью обеспечивать адаптивный поток вашего контента вокруг области просмотра.
Однако это также может быть пугающе, особенно для тех, кто только начинает осваивать передовые технологии, такие как grid и flexbox; то есть те из вас, кто может создавать красивые макеты, но не реагировать на них без медиа-запросов.
- Застряли? Медиа-запросы — ваш спаситель
- С чего начать?
- Давайте займемся сеткой
- Как настроить структуру сетки
- Как определить наш макет сетки
- Исходный макет сетки
- Почему автоматическая подгонка каждый раз?
- Разница между автозаполнением и автозаполнением
- Давайте перейдем к Flex
- Свойство flex-wrap
- Свойства гибкости -wrap
Застряли? Медиа-запросы — ваш спаситель
Оказывается, написание медиа-запросов было де-факто стандартом создания адаптивного дизайна до эры поплавков и чистых исправлений. Однако после запуска grid и flexbox люди придумали способы писать меньше медиа-запросов, сохраняя при этом такой отзывчивый вид своей страницы.
Итак, должен ли я больше писать медиа-запросы. ? Собственно говоря, нет, потому что медиа-запросы всегда будут рядом. Если вы где-то застряли, они всегда будут к вашим услугам, но вопрос в том, действительно ли их стоит писать в этом месте? Если вы не нашли другого способа сделать это, вот ваш @media запрос.
С чего начать?
Ну вот и все. открытый вопрос. В этом кадре я не буду рассказывать вам, как создать следующий Twitter или Facebook, скорее я дам вам простую аналогию того, что вам понадобится, чтобы сделать веб-сайты адаптивными. Помните о слове «простой», у вас это есть.
Я хочу, чтобы вы имели базовые знания о
flexи/или сетка или даже представление о том, что это такое и как они работают, прежде чем продолжить. Вы всегда можете вернуться к этому кадру, когда узнаете.
Давайте займемся сеткой
Как настроить структуру сетки
Мы знаем, что нам нужно определить строки и/или столбцы для макета после написания display: grid . Поскольку мы делаем здесь адаптивный макет, который является динамическим, чтобы соответствовать различным окнам просмотра, он не может быть чем-то статичным в пикселях или ремах. Нет, здесь нам нужна магия сетки.
Как определить наш макет сетки
Хотите верьте, хотите нет, но приведенная выше строка кода — это все, что нужно, чтобы настроить базовый адаптивный макет (например, приведенный ниже). Вам также не нужно определять какие-либо строки, поскольку сетка определяет это автоматически. Помимо этого, вы можете добавить пользовательский grid-gap , чтобы добавить пробел между синими.
Исходный макет сетки
Конечно, для этого здесь требуется некоторый дополнительный стиль, но я думаю, что сетка — самая сложная часть. Все, что мы сделали, — это стилизовали все элементы, чтобы придать им вид коробки!
- Вывод
- HTML
- CSS (SCSS)
Почему автоматическая подгонка каждый раз?
Это не так много каждый раз, но есть также свойство под названием auto-fill , которое вы можете использовать в соответствии с вашими требованиями. 
Разница между автозаполнением и автозаполнением
Автозаполнение создает больше столбцов своего размера при увеличении ширины области просмотра вместо того, чтобы соответствовать области просмотра, например a uto-fit делает. auto-fit растягивает элементы для получения полной ширины области просмотра. Итак, теперь вы можете использовать любой из них в соответствии с вашими требованиями.
Дополнительная информация об этом ниже:
- Вывод
- HTML
- CSS (SCSS)
Давайте перейдем к Flex
Flexbox — это одномерный контейнер, который отлично подходит для макетов, которым нужен поток только в одном направлении. Таким образом, он определенно подходит для нашего варианта использования.
Хотя ключ здесь не в том, чтобы сделать всю веб-страницу отзывчивой без использования хотя бы одного медиа-запроса, даже если он делает один раздел страницы адаптивный, оно того стоит.
Свойство flex-wrap
Это строка, которая делает все, как должно быть. flex-wrap — это свойство, описанное для гибких контейнеров, которое определяет, будут ли гибкие элементы оставаться в одной строке или их можно переносить на несколько строк, т. е. отзывчивый стиль .
Свойства гибкости -wrap
Итак, в нашем случае мы собираемся использовать flex-wrap: wrap , чтобы обернуть элементы в гибкий контейнер, чтобы они выглядели блестящими и отзывчивыми. . Мы также будем использовать крошечный justify-content: space-around , чтобы придать ему более симметричный вид.
- Вывод
- HTML
- CSS (SCSS)
Теперь вы узнали концепции создания потрясающих макетов. Начните с моего кода выше и просто возитесь с кодом. Затем замените co lored блоки с вашим содержимым. Идите медленно; вы доберетесь туда.
Помните, в вашем распоряжении всегда есть запросы
@media, поэтому, если они вам действительно нужны, почувствуйте бесплатно для использования.
