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

Что такое адаптивный дизайн?

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

В реальной жизни люди будут использовать ваш сайт по-разному, есть маленькие телефоны, большие телефоны, планшеты, планшеты в ландшафтном режиме, нетбуки, ноутбуки и iMac 5K.

Взгляните на домашнюю страницу ex-hort.ru. На десктопе у ​​него есть заголовок с логотипом, основными категориями, кнопками социальных сетей (низ сайта). Поля статей размещены в сетке, которая масштабируется с размером экрана, но всегда будет занимать только около 1000 пикселей (так как слишком большое масштабирование будет выглядеть странно). В общем, есть много места для работы, поэтому сайт здесь выглядит лучше всего.

Немного уменьшите экран (зажми на клаве Ctrl и покрути колёсико мышки) до размера планшета, и места станет не так много. Текст разбивается по-разному, изображения уменьшаются или обрезаются, а основные категории исчезают.

Поля статей сохраняют макет, но за счет дополнительных строк текста. Тем не менее, статья на первой странице более важна, она сохранит соотношение сторон и масштабирование без обрезки.

А на небольших устройствах сайт не можете позволить себе иметь все кнопки меню, ведь места недостаточно, чтобы разместить ячейки статей рядом друг с другом, поэтому меню сворачивается в гамбургер-меню, а поля статей становятся в столбик. Этот столбец занимает всю ширину устройства (минус 20 пикселей с каждой стороны для заполнения).

Вы на себе можете проверить это, чтобы увидеть как сайт меняет масштаб.

Статья в тему   Как включить экспериментальные функции браузера Google Chrome     Подробнее

Откройте инструменты разработчика Chrome, щелкнув правой кнопкой мыши в любом месте и выбрав «Посмотреть код». Нажмите кнопку мобильных устройств в правом верхнем углу всплывающей панели и выберите «Адаптивный» в качестве типа устройства:

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

Прежде чем делать какой-либо адаптивный дизайн, вам нужно исправить ошибку с мобильными страницами и окном просмотра. Без этого metaтега в заголовке HTML ваша мобильная страница может быть уменьшена и отображаться некорректно. Этот метатег быть может уже установлен, поскольку это довольно распространенная часть шаблона, но если нет, добавьте его:

<meta content="width=device-width, initial-scale=1" name="viewport" />

Основной способ сделать сайты отзывчивыми - использовать волшебное display: flex свойство, также известное как flexbox.

Flexbox работает, регулируя размер элементов в контейнере для масштабирования с изменением размера окна. Вы начинаете с создания контейнера и устанавливаете его на display: flex:

.container {
 display: flex;
}

Затем установите flex параметр для всех дочерних элементов:

.child {
 flex: 1;
}

Это заставит дочерние элементы расширяться и занимать столько места, сколько позволяет контейнер. Например, если у вас два контейнера, каждый будет занимать 50% места.

Flexbox работает, регулируя размер элементов (дочерних элементов) в контейнере для масштабирования в зависимости от изменения размера окна.

Если вместо этого вы установите для второго дочернего элемента значение flex: 2, он займет в два раза больше места, чем другой (66%).

Когда экран сжимается, контейнеры сжимаются вместе с ним. Однако они достигнут точки, когда не смогут сжаться меньше, чем размер их содержимого, но вы можете заставить их переноситься на другую строку (как текст) flex-wrap с помощью контейнера.

.container {
 flex-wrap: wrap;
}

Когда экран сжимается, вложенные контейнеры сжимаются вместе с ним

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

Еще одна технология CSS, лежащая в основе адаптивного дизайна, - это медиа-запросы. Медиа-запросы подобны If операторам CSS, которые позволяют проверить значение перед применением определённого CSS.

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

.topmenu {
 display: block
}

@media screen and (max-width: 600px) {
 .topmenu {
 display: none;
 }
}

600px - это произвольное значение, используемое для определения ограничений большинства мобильных устройств, но у вас может быть много вероятностей, которые изменяют стиль. Вы можете использовать их в сочетании с flexbox для изменения свойств в зависимости от размера устройства; например, одним из распространенных способов использования является отображение горизонтальных списков по вертикали с выравниванием по центру для облегчения чтения на мобильных устройствах.

Об адаптивном дизайне гораздо больше могут рассказать узкие специалисты по веб дизайну, чем мы. Поэтому, если вы хотите узнать больше о CSS, придётся изучать.

Если вы не хотите тратить время на переделку своего сайта с учетом flexbox, существует множество адаптивных шаблонов сайтов, которые можно использовать в качестве основы, в том числе множество бесплатных. Многие шаблоны, которые вы можете использовать с поставщиками хостинга, будут быстро реагировать на запросы.

Если вы хотите написать код самостоятельно, но не хотите делать все вручную, существует множество сторонних библиотек для работы с flexbox. Самым популярным из них является Bootstrap, который добавляет простые в использовании классы для работы с flexbox (наряду со многими другими полезными элементами пользовательского интерфейса).

С помощью Bootstrap вы указываете контейнеры с row классом, а затем указываете размер столбца с такими классами, как col-md-6, и CSS всё обрабатывает за вас. Например, следующий код упорядочит каждую div строку из трех на десктопе и добавит точку останова медиа-запроса, чтобы превратить ее в столбец полной ширины на мобильном устройстве:

<div class="row">
 <div class="col-md-4 col-sm-12"> //content </div>
 <div class="col-md-4 col-sm-12"> //content </div>
 <div class="col-md-4 col-sm-12"> //content </div>
</div>

Размеры измеряются из 12, поэтому col-md-4 для div будет установлена ​​ширина 33% для среднего размера ( "md"), а col-sm-12 для небольших устройств - 100% ( "sm").

В Bootstrap также есть множество тем и шаблонов, с которых вы можете начать. Он разработан, чтобы очень быстро начать работу и избавиться от времени, потраченного на возню с шаблонным HTML и CSS (отсюда и название).

Все скриншоты сделаны автором, февраль 2021 год. Идея: cloudsavvyit.com