Как создать адаптивную галерею миниатюр
В данном уроке мы разберем процесс создания адаптивной галереи миниатюр. Рассмотрим, как добиться решения определенных задач и обойти проблемы, которые могут проявиться в контексте большого проекта.
Введение
Прежде, чем окунуться в процесс, рассмотрим, что мы получим в результате работы. При показе демонстрационной страницы нужно изменить ширину окна браузера, чтобы увидеть реакцию нашего кода.
Исходный код HTML
Начнем разработку нашего проекта с кода HTML. Вместо использования простых изображений в галерее, задействуем более универсальное решение. Для элемента галереи будем показывать изображение, заголовок и краткое описание. Все компоненты будут обернуты в один элемент, а вся галерея помещена в контейнер div
. Весь код будет выглядеть следующим образом:
<div class="container"> <div class="galleryItem"> <a href="#"><img src="/..." alt="" /></a> <h3>Заголовок</h3> <p>Lorem ipsum dolor sit amet...</p> </div> <div class="galleryItem"> <a href="#"><img src="/..." alt="" /></a> <h3>Заголовок</h3> <p>Lorem ipsum dolor sit amet...</p> </div> </div>
Чтобы добавить пункт в галерею, нужно просто скопировать div
galleryItem (в демонстрации используется десять таких пунктов). В данной точке развития проекта мы видим, какие цели определились для кода CSS. У нас есть два класса: container и galleryItem. Также есть изображения, теги h3и абзацы. В демонстрации для изображений используются картинки с сервиса LoremPixel.
Стиль контейнера
Начнем создавать наш код CSS с задания ширины контейнера и центрирования его на странице. Таким образом, мы получим отличное, широкое пространство для работы с галереей:
.container { width: 80%; margin: 30px auto; overflow: hidden; }
Обратите внимание, что ширина установлена в процентах. Так мы получаем использование всего доступного пространства и гибкий шаблон. Нам нужно, чтобы дизайн смотрелся не только в нескольких определенных точках, а адаптировался к любому окну просмотра.
Основные стили галереи
Теперь перейдем к определению стилей для класса galleryItem. Установим цвет текста, размер шрифта и будем смещать элементы влево.
.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%, мы получаем в результате адаптацию размера при уменьшении ширины окна просмотра. Также для картинок скругляются углы.
Работаем с колонками
Это наиболее важная часть нашего урока. Нужно разобраться как устанавливать ширину и поля для каждого элемента в галерее. Так все элементы располагаются в контейнере, то нужно использовать процентные размерности, чтобы они адаптировались к изменениям окна просмотра.
В дизайне демонстрационной страницы мы будем использовать пять колонок. разберемся с математикой для расчета полей. Между колонками будет поле шириной 4%. Умножив на 5, мы увидим, что 20% ширины уходит на поля. На содержание остается только 80%. То есть каждая колонка будет 16% шириной.
Теперь мы можем вставить данные значения в код CSS. Каждый классgalleryItem представляет одну колонку, то есть ширина будет 16% и поле 2% для каждой стороны, что в сумме даст 4%.
.galleryItem { color: #797478; font: 10px/1.5 Verdana, Helvetica, sans-serif; float: left; width: 16%; margin: 2% 2% 50px 2%; }
Данный набор стилей создаст отличный пятиколоночный шаблон, который будет хорошо смотреться на экранах размера 13 дюймов и больше.
Где шаблон будет смотреться коряво?
К сожалению, данный шаблон будет ломаться при уменьшении размера страницы. При ширине меньше 500px он становится абсолютно нечитаемым и корявым.
Для решения задачи мы будем использовать медиа запросы для переопределения подходящего размера колонок.
Определение критических точек
Существует множество решений для определения критических точек, на которых следует сосредоточиться при разработке дизайна. Рынок заполнен различными устройствами с разным размером экрана, и очень непросто учесть все возможные варианты.
Для упрощения задачи отбросим мысли о том, какой размер экрана наиболее популярен, и дадим возможность нашему шаблону самому определять критические точки. Если проанализировать точки, в которых шаблон ломается, мы сможем зафиксировать данные области и сделаем наш шаблон адаптирующимся под любое устройство.
Как определить критические точки?
Самый лучший способ - открыть страницу в браузере и уменьшать размер окна. Технически, наш шаблон никогда не сломается, так как будет изменяться масштаб. Однако, при размере окна около 940px колонка текста станет слишком узкой для гармоничного размещения текста:
Для исправления ситуации в данной точке надо сделать четыре колонки вместо пяти. Изменив ширину колонки до 21% мы решим задачу. Так как используются оба свойства “max-width” и “max-device-width”, то дизайн будет меняться и при изменении окна браузера и на устройствах с размером экрана меньше установленных значений.
@media only screen and (max-width : 940px), only screen and (max-device-width : 940px){ .galleryItem {width: 21%;} }
Добавление данного стиля решает задачу. Наш пяти колоночный дизайн отлично работает на экранах шире 940px, а для более узких превращается в четырех колоночный шаблон.
Операцию повторить
Теперь повторяем описанный выше процесс снова и снова. Уменьшаем размер окна и смотрим, когда дизайн перестанет функционировать. Следующая точка обнаруживается на 720px. Нужно изменить ширину колонки до 29.33%, чтобы получить трехколоночный шаблон:
@media only screen and (max-width : 720px), only screen and (max-device-width : 720px){ .galleryItem {width: 29.33333%;} }
Продолжаем процесс до получения одной колонки (размер окна приблизительно равен размеру экрана iPhone). Вот полный набор медиа запросов.
/* MМЕДИА ЗАПРОСЫ*/ @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;} }
Заключение
Теперь у нас есть отличная адаптивная галерея миниатюр, которая великолепно выглядит на любом устройстве или в любом окне браузера.
Вместо разработки шаблона под конкретный наиболее популярный медиа запрос мы анализировали функционирование нашего дизайна при уменьшении окна браузера и вносили изменения в критических точках, чтобы восстановить внешний вид.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/MyOarhSXqV4/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
"Если технология меняется почти каждый день, нет смысла нанимать человека потому, что он обладает специфическим набором профессиональных навыков - все равно эти навыки скоро устареют. Вам нужно стараться принимать на работу людей, которые обладают широкими универсальными способностями к решению проблем, каким бы трудным это ни оказалось." |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.