Создание адаптивных макетов без использования медиа-запросов

Создание адаптивных макетов без использования медиа-запросов

От автора: привет всем! Дискуссии на эту тему ведутся с тех пор, как появились grid и flexbox со всеми своими интересными аспектами, заставляющими контент быстро реагировать на область просмотра.

Тем не менее, это может быть пугающим для тех, кто начинает использовать такие передовые технологии CSS, как grid и flexbox, которые могут создавать привлекательные макеты — но не делать их адаптивными — без медиа-запросах.

Застряли? Медиа-запросы вас спасут

Оказывается, написание медиа-запросов было похоже на де-факто стандарт создания адаптивного дизайна. Однако после выхода grid и flexbox это больше не так. Люди придумали, как не писать много медиа-запросов, и при этом их страница выглядит удивительно адаптивной.

Итак, мне больше не писать медиа-запросы? На самом деле, нет, потому что медиа-запросы всегда выручат вас, если вы где-то застряли. Они всегда к вашим услугам, но вопрос в том, действительно ли их стоит писать в этом месте? Если вы не нашли другого способа сделать это, тогда пишите @media-запрос.

С чего начать?

Ну, это открытый вопрос. Я не буду рассказывать вам в этом посте о создании следующего Твиттера или Фейсбука, а приведу простую аналогию того, что вам нужно, чтобы сделать вещи отзывчивыми. Запомни это слово — просто. Да, вы правильно поняли.

Я хочу, чтобы у вас были базовые знания flex и / или grid, или хотя бы понимание того, что они из себя представляют или как они работают. Вы всегда можете вернуться сюда, когда изучите это.

Давайте начнем работу с сеткой

Как настроить структуру сетки?

Мы знаем, что после записи display: grid нам нужно определить ряды и / или колонки макета. Поскольку мы создаем адаптивный макет, который является динамическим, чтобы соответствовать различным областям просмотра, это не может быть чем-то статичным, заданным в пикселях или rem. Нам нужно немного магии сетки.

Создание адаптивных макетов без использования медиа-запросов

PS: 1fr означает одну долю от общего доступного пространства.

Хотите верьте, хотите нет! Эта строка кода выше — это все, что вам нужно, чтобы настроить базовый адаптивный макет, такой как приведен ниже. Вам также не нужно определять какие-либо ряды, поскольку сетка вычисляет их автоматически. Помимо этого, вы можете добавить grid-gap, чтобы создать между ними красивый зазор.

Подсказка: вы можете изменить область просмотра codepen, кликнув 0.5x, 1x или 2x.

Оригинальная схема сетки

Конечно, для достижения этого необходимы дополнительные стили, но я думаю, что сетка является самой сложной частью. Мы только что задали некоторые стили для всех элементов, чтобы придать им аккуратный вид!

Почему каждый раз auto-fit?

Ну, не каждый раз, есть еще одно свойство, auto-fill, которое вы можете использовать в соответствии со своими требованиями.

Создание адаптивных макетов без использования медиа-запросов

Разница между auto-fill и auto-fit

auto-fill создает больше столбцов с теми же размером, когда область просмотра увеличивается по ширине, а не подгоняется к области просмотра, тогда как функция auto-fit работает наоборот. Она растягивает элементы, чтобы получить полную ширину области просмотра. Теперь вы можете использовать любую из них в соответствии со своими требованиями.

Теперь перейдем к Flex

Flexbox — это одномерные контейнеры, которые могут оказаться весьма полезными для макетов, для которых нужно только одно направление. Так что это определенно вписывается в наш вариант использования.

PS: Хотя ключевой момент здесь в том, что это не делает всю веб-страницу адаптивной без единого медиа-запроса, даже если это делает один раздел страницы адаптивным, оно того стоит.

Удивительное свойство flex-wrap

Это строка, которая делает все таким, как должно быть. Итак, это свойство, указываемое для flex-контейнера, которое решает, должны ли flex-элементы оставаться в одной строке или могут быть перенесены в несколько строк, то есть адаптивный стиль.

Создание адаптивных макетов без использования медиа-запросов

Свойства flex-wrap

Таким образом, в нашем случае мы собираемся использовать для элементов flex-wrap: wrap, чтобы придать нашему разделу блестящий и адаптивный вид. Мы также используем justify-content: space-around, чтобы все выглядело более симметричным.

Могу ли я создать адаптивные макеты сейчас?

Ага. Вы изучили концепции создания потрясающих макетов. Вы можете начать с кодов, которые я привел выше, поэкспериментировать с ними, а затем заменить цветные блоки своим содержимым и двигаться дальше. Помните, что у вас всегда есть в распоряжении @media-зопросы, поэтому, если они вам действительно нужны, не бойтесь их использовать.

Автор: Tulsi Prasad

Источник: https://dev.to

Редакция: Команда webformyself.