Что такое «отзывчивый дизайн» и как его использовать?
Адаптивный дизайн — это идея сделать так, чтобы ваш сайт отлично выглядел в любом разрешении, а не только на компьютере или мобильном устройстве. С адаптивным сайтом ваш настольный компьютер и мобильный сайт представляют собой одну и ту же страницу и масштабируются в зависимости от размера окна.
Что такое адаптивный дизайн?
Адаптивный дизайн позволяет изменять размер вашего сайта под любой экран. Вместо того, чтобы проектировать на основе определенного макета или разрабатывать отдельные сайты для мобильных и настольных компьютеров, ваш сайт должен масштабироваться для соответствия любому устройству. В реальном мире люди будут использовать ваш сайт самыми разными способами; есть маленькие телефоны, большие телефоны, планшеты, планшеты в ландшафтном режиме, нетбуки, ноутбуки и iMac 5K.
Взгляните на домашнюю страницу linux-console.net. На рабочем столе у него есть заголовок с логотипом, основные категории, кнопки социальных сетей и, наконец, меню-гамбургер с расширенными категориями. Блоки со статьями располагаются в сетке, которая масштабируется с размером экрана, но всегда занимает около 1000 пикселей (так как слишком большое масштабирование выглядело бы странно). В общем, места для работы предостаточно, поэтому здесь сайт выглядит лучше всего.
Немного уменьшите экран до размера планшета, и места станет меньше. Текст разбивается по-другому, изображения уменьшаются или обрезаются, а основные категории исчезают.
Блоки статей сохраняют макет, но за счет дополнительных строк текста. Тем не менее, статья на первой странице важнее: она сохранит пропорции и масштаб без обрезки.
И на очень маленьких устройствах вы не можете позволить себе иметь все эти кнопки в меню, и там недостаточно места, чтобы разместить поля статей рядом друг с другом, поэтому меню свернуто в меню-гамбургер, а поля статей выкладывается в столбик. Этот столбец всегда будет занимать всю ширину устройства (минус 20 пикселей с каждой стороны для заполнения).
Вы можете проверить это на себе, чтобы увидеть, как масштабируется ваш сайт. Откройте инструменты разработчика 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% пространства:
Если вместо этого вы установите для второго дочернего элемента значение flex: 2, он займет в два раза больше места, чем другой (всего 66%).
Когда экран сжимается, дети сжимаются вместе с ним. Однако они достигнут точки, когда они не смогут уменьшиться меньше, чем размер их содержимого, но вы можете заставить их переноситься на другую строку (точно так же, как текст) с помощью flex-wrap на контейнере. .
.container {
flex-wrap: wrap;
}
Теперь вы никогда не столкнетесь с проблемой того, что контент вашего сайта будет находиться за пределами экрана или настолько скомкан, что будет неразборчив.
Еще одна технология CSS, стоящая за адаптивным дизайном, — это медиа-запросы. Медиа-запросы похожи на операторы CSS If , которые позволяют вам проверить значение перед применением некоторого CSS. Вы можете использовать это для динамического стиля компонентов в зависимости от ширины браузера. Например, если у вас есть верхняя строка меню, которую вы хотите скрыть на мобильном устройстве и заменить меню-гамбургером, вы можете скрыть ее с помощью запроса @media :
.topmenu {
display: block
}
@media screen and (max-width: 600px) {
.topmenu {
display: none;
}
}600 пикселей — это просто произвольное значение, используемое для определения ограничений большинства мобильных устройств, но у вас может быть много контрольных точек, которые изменяют стиль. Вы можете использовать их в сочетании с flexbox для изменения свойств flex в зависимости от размера устройства; например, одно из распространенных применений — отображение горизонтальных списков вертикально и с выравниванием по центру для облегчения чтения на мобильных устройствах.
Отзывчивый дизайн — это гораздо больше, чем мы можем рассказать здесь, поэтому, если вы хотите узнать больше о CSS, стоящем за ним, вы можете прочитать это отличное руководство по flexbox от CSS Tricks или прочитать документацию W3Schools для медиа-запросов.
Как мне сделать мой сайт адаптивным?
Если вы не хотите тратить время на переделку своего сайта с учетом flexbox, существует множество адаптивных шаблонов сайтов, которые вы можете использовать в качестве основы, в том числе множество бесплатных. Многие шаблоны, которые вы можете использовать с провайдерами управляемого хостинга (GoDaddy, SquareSpace, Wix и т. д.), будут адаптивными по умолчанию. Underscores — отличный бесплатный стартовый шаблон для WordPress.
Если вы хотите написать код самостоятельно, но не хотите делать это все вручную, есть множество сторонних библиотек для работы с 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 (отсюда и название).