Адаптивный дизайн

Featherlight — минималистичная библиотека для создания lightbox-окон, изначально спроектированная с упором на простоту и гибкость. Адаптивный дизайн в Featherlight не реализован через громоздкие абстракции, а достигается комбинацией CSS-подходов, динамических вычислений размеров и корректного взаимодействия с viewport браузера.

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

Модель позиционирования и центрирование

Контейнер Featherlight (.featherlight) позиционируется с использованием fixed, что привязывает его к viewport, а не к документу. Это критично для адаптивности:

.featherlight {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Такой подход гарантирует:

  • корректную работу при прокрутке страницы;
  • одинаковое поведение на экранах разного размера;
  • отсутствие зависимости от размеров родительских элементов.

Центрирование контента выполняется через flexbox или inline-block в сочетании с vertical-align, в зависимости от версии и кастомизации. Flexbox предпочтительнее для адаптивных сценариев:

.featherlight-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

Ограничение размеров контента

Для предотвращения выхода содержимого за границы экрана Featherlight использует ограничения max-width и max-height, выраженные в процентах от viewport:

.featherlight-content {
    max-width: 90vw;
    max-height: 90vh;
}

Ключевые эффекты:

  • изображения масштабируются пропорционально;
  • iframe и AJAX-контент не ломают верстку;
  • на мобильных устройствах сохраняется отступ от краёв экрана.

Использование vw и vh делает размеры независимыми от конкретного устройства и плотности пикселей.

Адаптивная работа с изображениями

Featherlight не навязывает собственную логику масштабирования изображений, полагаясь на CSS:

.featherlight-image {
    max-width: 100%;
    height: auto;
}

Это обеспечивает:

  • автоматическое уменьшение изображения под ширину контейнера;
  • сохранение пропорций;
  • корректную работу с изображениями высокой чёткости (Retina, HiDPI).

При использовании srcset и sizes Featherlight корректно отображает адаптивные изображения без дополнительной настройки.

Поведение iframe и встроенного контента

Для iframe-контента (видео, карты, сторонние сервисы) адаптивность достигается через обёртку с относительным позиционированием:

.featherlight-iframe {
    width: 80vw;
    height: 45vw;
    max-width: 960px;
    max-height: 540px;
}

Такой подход:

  • сохраняет соотношение сторон;
  • предотвращает чрезмерное увеличение на больших экранах;
  • делает видео удобным для просмотра на мобильных устройствах.

При необходимости используется медиазапрос для изменения пропорций на узких экранах.

Медиазапросы и кастомизация под экраны

Featherlight не включает встроенные медиазапросы, что оставляет полный контроль стилям проекта. Типичный пример адаптации под мобильные устройства:

@media (max-width: 600px) {
    .featherlight-content {
        max-width: 100vw;
        max-height: 100vh;
        padding: 10px;
    }
}

Это позволяет:

  • убрать лишние отступы;
  • задействовать весь экран смартфона;
  • повысить читаемость текстового контента.

Управление прокруткой и viewport

При открытии lightbox Featherlight блокирует прокрутку основного документа, что особенно важно на мобильных устройствах:

html.featherlight-lock {
    overflow: hidden;
}

Преимущества:

  • предотвращение «скачков» страницы;
  • отсутствие конфликтов с виртуальной клавиатурой;
  • стабильное позиционирование lightbox-окна.

На iOS это решение минимизирует проблемы с изменением высоты viewport при появлении адресной строки.

Адаптивные анимации

Анимации открытия и закрытия Featherlight выполняются через CSS-переходы, не зависящие от размеров экрана:

.featherlight {
    opacity: 0;
    transition: opacity 0.25s ease;
}

.featherlight-open {
    opacity: 1;
}

Поскольку анимация не использует трансформации, зависящие от размеров, визуальное поведение остаётся одинаковым на всех устройствах и не вызывает перерасчёта layout.

Работа с динамически изменяющимся контентом

При загрузке AJAX-контента или изменении размеров содержимого Featherlight автоматически пересчитывает высоту контейнера. Это особенно важно для адаптивного дизайна, где размеры могут меняться при:

  • смене ориентации экрана;
  • изменении масштаба;
  • динамической подгрузке данных.

Внутренние обработчики событий resize обеспечивают актуальность размеров без участия внешнего кода.

Минимализм как основа адаптивности

Featherlight сознательно избегает сложных JS-вычислений размеров. Основная нагрузка ложится на CSS и браузерный движок. Такой подход:

  • снижает вероятность ошибок на редких устройствах;
  • упрощает поддержку;
  • делает библиотеку устойчивой к изменениям стандартов CSS.

Адаптивный дизайн в Featherlight — результат архитектурного минимализма, где каждый элемент выполняет строго определённую функцию и не мешает естественному поведению браузера.

Оглавление