Создание адаптивной веб-галереи может отнять у вас достаточно много времени. В этой статье мы рассмотрим процесс разработки такой галереи миниатюр, чтобы вы могли получить представление о том, как она работает и как её можно использовать в своих проектах.
В освоении адаптивного дизайна главное представлять, как можно справиться с определённой задачей и решить любые проблемы, возникающие в контексте крупных проектов. Однажды вы будете работать над проектом, и вам потребуется создать адаптивную галерею, тогда-то вы и вспомните эту статью.
Краткий обзор
Перед тем, как начать, взгляните на то, что у нас должно получиться. Не забудьте изменить размеры окна своего браузера, чтобы получить какое-то представление о том, как страница будет выглядеть на различных экранах.
Базовый HTML код
Начнём проект с базового HTML кода. Мы не будем использовать в галерее обычные изображения, а поступим более разносторонне. Для каждого элемента галереи у нас будет изображение, заголовок и краткое описание. Все это мы обернём в повторяющийся элемент и поместим все элементы в div
с классом container
. Это будет выглядеть примерно так:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="container"> <div class="galleryItem"> <a href="#"><img src="..." alt="" /></a> <h3>Title</h3> <p>Lorem ipsum dolor sit amet...</p> </div> <div class="galleryItem"> <a href="#"><img src="..." alt="" /></a> <h3>Title</h3> <p>Lorem ipsum dolor sit amet...</p> </div> </div> |
Чтобы добавить в галерею элементы, просто продублируйте div galleryItem
(в нашем примере их десять). Здесь мы можем видеть, для каких элементов нужно задать стили CSS. У нас есть два класса: container
и galleryItem
. Также имеем несколько картинок, тегов h3
и параграфов. В качестве изображений здесь использованы фото от
Стили «Container»
В первую очередь в CSS, мы назначаем ширину для container
и центрируем его на странице. Это даёт нам хорошее, широкое пространство для работы с галереей.
1 2 3 4 5 |
.container { width: 80%; margin: 30px auto; overflow: hidden; } |
Обратите внимание, что ширина установлена в процентах. Так наша страница будет не только красивой, но и гибкой. Ведь мы не хотим, чтобы наш дизайн выглядел хорошо только на нескольких определённых разрешениях, нам нужно чтобы проект адаптировался под любой размер экрана.
Базовые стили галереи
Теперь приступим к базовым стилям класса galleryItem
. Здесь мы настраиваем свойства color
, font-size
и float
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.galleryItem { color: #797478; font: 10px/1.5 Verdana, Helvetica, sans-serif; float: left; } .galleryItem h3 { text-transform: uppercase; } .galleryItem img { max-width: 100%; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } |
Также мы добавляем несколько стилей для картинок. Установив max-width
изображений на 100%, мы гарантируем, что если страница будет сужаться, изображения будут подстраиваться под её ширину. И наконец, немного закруглим углы каждой картинки.
В следующем шаге мы установим ширину колонок, но пока, давайте посмотрим, что у нас уже получилось. Сейчас галерея должна выглядеть примерно так:
Размеры колонок
Здесь начинается самое важное. Нам нужно узнать ширину и margin
каждого элемента галереи. Как и в случае с container
, мы устанавливаем размеры в процентах, так элементы будут автоматически масштабироваться.
Наша галерея будет состоять из пяти колонок. Для вычисления всех необходимых значений, проще всего начать с margin
. Пусть margin
между столбцами будет 4%, тогда, умножив это на пять столбцов, получим, что на margin
уходит 20% всей ширины, а 80% остаётся для контента. Разделив 80% на пять, получим, что ширина одного столбца равна 16%.
Теперь мы должны задать эти значения в нашем CSS файле. Каждый элемент .galleryItem
представляет один столбец, так его ширина составляет 16%, а margin
по 2% с каждой стороны даёт нам отступ 4% между двумя соседними элементами.
1 2 3 4 5 6 7 8 |
.galleryItem { color: #797478; font: 10px/1.5 Verdana, Helvetica, sans-serif; float: left; width: 16%; margin: 2% 2% 50px 2%; } |
Мы получили прекрасную пятиколоночную разметку, которая хорошо выглядит на экранах размером от 13 дюймов и выше.
Когда дизайн теряет функциональность?
К сожалению, эта разметка выглядит ужасно, если мы уменьшаем размер страницы. Когда ширина становится меньше 500px, она полностью теряет свою читабельность и полноценность.
Чтобы решить эту проблему, мы будем использовать media queries, и вставим несколько контрольных точек, в которых количество столбцов будет уменьшаться в соответствии с размером.
Определение контрольных точек
В последнее время было много споров о том, на какие размеры стоит опираться в своём дизайне. Рынок переполнен множеством различных устройств, все они разных размеров, и становится трудно подстроиться под все одновременно.
Чтобы упростить эту задачу, давайте отбросим свои мысли на счёт того, устройства с каким размером экрана самые популярные, и позволим своему шаблону самому определить контрольные точки. Если мы проанализируем точки, где наша разметка меняет свой вид, мы заставим свой дизайн адаптироваться под любое устройство (наша гибкая сетка позаботится и об интервалах).
Определяем, где ломается разметка
Лучший способ узнать это – просто открыть наш проект в браузере и уменьшить размер окна. Технически, наша разметка никогда не будет ломаться, потому что она изначально построена масштабируемой. Однако при ширине примерно 940px, столбцы текста становятся слишком узкими и теряют читабельность:
Чтобы это исправить, нам нужно уменьшить количество столбцов до четырёх. Для этого мы можем увеличить ширину столбца до 21%. Т.к. здесь мы используем и max-width
, и max-device-width
, дизайн будет масштабироваться, как в браузере настольного компьютера, так и на любом устройстве с экраном меньше этой ширины.
1 2 3 4 |
@media only screen and (max-width : 940px), only screen and (max-device-width : 940px){ .galleryItem {width: 21%;} } |
Добавление этих стилей отлично решает проблему. Наш пятиколоночный шаблон прекрасно работает при ширине выше 940px, а при этом значении он становиться четырёхколоночным.
Повторяем снова и снова
Теперь нужно повторить эти действия ещё несколько раз. Продолжайте уменьшать окно и следите за тем, когда дизайн перестаёт правильно функционировать. В нашем шаблоне вы быстро найдёте другую проблемную область, примерно 720px:
На сей раз мы меняем дизайн на трёхколоночный, с шириной столбца примерно 29.33%.
1 2 3 4 |
@media only screen and (max-width : 720px), only screen and (max-device-width : 720px){ .galleryItem {width: 29.33333%;} } |
Продолжайте этот процесс до тех пор, пока не останется только один столбец, примерно для размера iPhone. Вот полный набор media queries.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/* MEDIA QUERIES*/ @media only screen and (max-width : 940px), only screen and (max-device-width : 940px){ .galleryItem {width: 21%;} } @media only screen and (max-width : 720px), only screen and (max-device-width : 720px){ .galleryItem {width: 29.33333%;} } @media only screen and (max-width : 530px), only screen and (max-device-width : 530px){ .galleryItem {width: 46%;} } @media only screen and (max-width : 320px), only screen and (max-device-width : 320px){ .galleryItem {width: 96%;} .galleryItem img {width: 96%;} .galleryItem h3 {font-size: 18px;} .galleryItem p, {font-size: 18px;} } |
Выводы
Итак мы закончили наш проект. Теперь у вас должна быть прекрасно отформатированная адаптивная галерея, которая выглядит отлично практически на любом устройстве и при любом размере окна браузера.
Мы не стали решать, какие media queries самые популярные, а просто проанализировали точки, в которых наш дизайн теряет свою полноценность, и уменьшили в них количество столбцов, чтобы наш сайт оставался читабельным. Результат — прекрасный гибкий дизайн для любого устройства.
Здравствуйте. Очень понравилось статья. Спасибо. Теперь вопрос по существу: а как адаптировать страницу наоборот — под большие экраны? Благодарю.
также. по аналогии