Создание адаптивной галереи миниатюр

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

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

Краткий обзор

Перед тем, как начать, взгляните на то, что у нас должно получиться. Не забудьте изменить размеры окна своего браузера, чтобы получить какое-то представление о том, как страница будет выглядеть на различных экранах.

Пример

Базовый HTML код

Начнём проект с базового HTML кода. Мы не будем использовать в галерее обычные изображения, а поступим более разносторонне. Для каждого элемента галереи у нас будет изображение, заголовок и краткое описание. Все это мы обернём в повторяющийся элемент и поместим все элементы в div с классом container. Это будет выглядеть примерно так:

Чтобы добавить в галерею элементы, просто продублируйте div galleryItem (в нашем примере их десять). Здесь мы можем видеть, для каких элементов нужно задать стили CSS. У нас есть два класса: container и galleryItem. Также имеем несколько картинок, тегов h3 и параграфов. В качестве изображений здесь использованы фото от LoremPixel.

Стили «Container»

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

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

Базовые стили галереи

Теперь приступим к базовым стилям класса galleryItem. Здесь мы настраиваем свойства color, font-size и float.

Также мы добавляем несколько стилей для картинок. Установив max-width изображений на 100%, мы гарантируем, что если страница будет сужаться, изображения будут подстраиваться под её ширину. И наконец, немного закруглим углы каждой картинки.

В следующем шаге мы установим ширину колонок, но пока, давайте посмотрим, что у нас уже получилось. Сейчас галерея должна выглядеть примерно так:

Размеры колонок

Здесь начинается самое важное. Нам нужно узнать ширину и margin каждого элемента галереи. Как и в случае с container, мы устанавливаем размеры в процентах, так элементы будут автоматически масштабироваться.

Наша галерея будет состоять из пяти колонок. Для вычисления всех необходимых значений, проще всего начать с margin. Пусть margin между столбцами будет 4%, тогда, умножив это на пять столбцов, получим, что на margin уходит 20% всей ширины, а 80% остаётся для контента. Разделив 80% на пять, получим, что ширина одного столбца равна 16%.

Теперь мы должны задать эти значения в нашем CSS файле. Каждый элемент .galleryItem представляет один столбец, так его ширина составляет 16%, а margin по 2% с каждой стороны даёт нам отступ 4% между двумя соседними элементами.

Мы получили прекрасную пятиколоночную разметку, которая хорошо выглядит на экранах размером от 13 дюймов и выше.

Когда дизайн теряет функциональность?

К сожалению, эта разметка выглядит ужасно, если мы уменьшаем размер страницы. Когда ширина становится меньше 500px, она полностью теряет свою читабельность и полноценность.

Чтобы решить эту проблему, мы будем использовать media queries, и вставим несколько контрольных точек, в которых количество столбцов будет уменьшаться в соответствии с размером.

Определение контрольных точек

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

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

Определяем, где ломается разметка

Лучший способ узнать это – просто открыть наш проект в браузере и уменьшить размер окна. Технически, наша разметка никогда не будет ломаться, потому что она изначально построена масштабируемой. Однако при ширине примерно 940px, столбцы текста становятся слишком узкими и теряют читабельность:

Чтобы это исправить, нам нужно уменьшить количество столбцов до четырёх. Для этого мы можем увеличить ширину столбца до 21%. Т.к. здесь мы используем и max-width, и max-device-width, дизайн будет масштабироваться, как в браузере настольного компьютера, так и на любом устройстве с экраном меньше этой ширины.

Добавление этих стилей отлично решает проблему. Наш пятиколоночный шаблон прекрасно работает при ширине выше 940px, а при этом значении он становиться четырёхколоночным.

Повторяем снова и снова

Теперь нужно повторить эти действия ещё несколько раз. Продолжайте уменьшать окно и следите за тем, когда дизайн перестаёт правильно функционировать. В нашем шаблоне вы быстро найдёте другую проблемную область, примерно 720px:

На сей раз мы меняем дизайн на трёхколоночный, с шириной столбца примерно 29.33%.

Продолжайте этот процесс до тех пор, пока не останется только один столбец, примерно для размера iPhone. Вот полный набор media queries.

Выводы

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

Мы не стали решать, какие media queries самые популярные, а просто проанализировали точки, в которых наш дизайн теряет свою полноценность, и уменьшили в них количество столбцов, чтобы наш сайт оставался читабельным. Результат — прекрасный гибкий дизайн для любого устройства.