Адаптивный веб-дизайн

Adaptive Web Design (RWD)

подход к разработке сайтов, при котором веб-страницы автоматически подстраиваются под размер экрана пользователя

Принципы адаптивного дизайна

Гибкие макеты

позволяет элементам интерфейса изменять свои размеры в зависимости от ширины экрана

Гибкие макеты используют относительные единицы измерения (%, vw, vh, em, rem), позволяя контейнерам изменять размеры пропорционально экрану.

.container {
  width: 80%;
  max-width: 1200px;
}
                        

Главная проблема

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

Рекомендации

• Используйте % и vw для ширины контейнеров
• Используйте rem и em для шрифтов
• Комбинируйте разные единицы для лучшего результата

Breakpoints

точки на экране, в которых макет сайта должен изменяться

зависят от устройства, на котором сайт просматривается, и от ширины экрана

Медиазапросы

позволяют изменять стиль страницы в зависимости от различных характеристик устройства

@media условие {
  /* CSS-правила */
}
                        

Условия

Основанные на пикселях

Условия

Пример использования

@media (max-width: 320px) {
  /* Стили для экранов менее 320px */
  .container {
    font-size: 12px;
  }
}

@media (min-width: 321px) and (max-width: 768px) {
  /* Стили для экранов от 321px до 768px */
  .container {
    font-size: 14px;
  }
}

@media (min-width: 769px) {
  /* Стили для экранов больше 768px */
  .container {
    font-size: 16px;
  }
}
                        

Каскадирование стилей

стили, которые идут после медиазапроса, могут перекрывать ранее применённые

.container {
  font-size: 18px;
}

@media (max-width: 768px) {
  .container {
    font-size: 14px;
  }
}
                        

Гибкие изображения и медиа

Проблема фиксированных изображений

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

Гибкие размеры медиа

Картинки, видео и другие медиафайлы должны адаптироваться к размеру экрана

img {
    max-width: 100%;
    width: 30vw;
    height: auto;
}
                        

Адаптивное разрешение медиа

Для ускорения времени загрузки можно использовать определенные размеры изображений, в зависимости от размера экрана

<picture>
      <source media="(max-width: 800px)" srcset="elva-480w-close-portrait.jpg" />
      <source media="(max-width: 1000px)" srcset="elva-1000w.jpg" />
      <img src="elva-1400w.jpg" alt="Chris standing up holding his daughter Elva" />
</picture>
                        

Тег picture

обрабатывает несколько источников изображений, выбираемых на основе условий, указанных в атрибуте media

Тег source

задает альтернативные изображения для разных условий

<picture>
      <source media="(max-width: 800px)" srcset="elva-480w-close-portrait.jpg" />
      <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />
</picture>
                        

Пример

Видео работают альтернативно с изображениями

<video>
  <source src="video-small.mp4" media="(max-width: 600px)">
  <source src="video-medium.mp4" media="(max-width: 1200px)">
  <source src="video-large.mp4">
</video>
                        

Гибкие сетки

Использование Flexbox для адаптивных макетов

Благодаря свойству flex-wrap элементы могут перемещаться согласно тому, влезают ли они в контейнер

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
                        

Гибкие сетки

Использование Grid для адаптивных макетов

1. fr

единица измерения в CSS Grid, которая позволяет распределить доступное пространство между элементами сетки

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 20px;
}
                        

Гибкие сетки

Использование Grid для адаптивных макетов

2. auto-fit и auto-fill

функции, которые можно использовать с grid-template-columns или grid-template-rows для создания динамических макетов, которые адаптируются к доступному пространству

auto-fill

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
}
                        

auto-fit

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
}
                        

Пример

Адаптация колонок и отступов в CSS Grid

minmax()

можно задавать минимальную и максимальную ширину или высоту для колонок или строк в сетке

Применимо для всех элементов, не только для grid системы

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 20px;
}

img {
    width: minmax(100%, 800px)
}
                    

gap

устанавливает отступы между элементами сетки

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
                    

grid-auto-flow

позволяет управлять порядком, в котором элементы будут размещаться в сетке

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense;
}
                    

clamp()

позволяет ограничивать значение, определяя минимальный, предпочтительный и максимальный пределы

clamp(min, value, max)
                    

• min — минимальное значение, которое будет применяться, если вычисленное значение меньше этого
• value — предпочтительное значение, которое обычно используется, если оно находится между минимальным и максимальным значениями
• max — максимальное значение, которое будет применяться, если вычисленное значение больше этого

Примеры использования clamp()

.container {
  width: clamp(300px, 50%, 800px);
  margin: 0 auto;
}
                        

.element {
  padding: clamp(10px, 2vw, 20px);
}
                        

DevTools

набор инструментов, встроенных в большинство современных браузеров, который позволяет разработчикам взаимодействовать с веб-страницами, отлаживать их, анализировать производительность и изменять стили и структуру в реальном времени

Возможности DevTools

Инспектор (Elements)

Применение:

• Просмотр HTML-структуры Вкладка "Elements" показывает весь HTML-код страницы в виде дерева. Вы можете "щелкнуть" на любой элемент, чтобы увидеть его атрибуты, классы и стили.
• Редактирование CSS В нижней части панели находится раздел стилей, где можно редактировать CSS-свойства в реальном времени. Например, можно изменить шрифт, цвет или размер элементов.
• Изменение HTML Вы можете редактировать HTML-код прямо в браузере, добавлять или удалять элементы, чтобы увидеть, как это влияет на внешний вид страницы.

Консоль (Console)

Применение:

• Просмотр ошибок Все ошибки JavaScript и предупреждения будут отображаться в консоли
• Выполнение кода В консоли можно тестировать JavaScript, вводя команды и получая результат в реальном времени
• Логирование Вы можете добавлять console.log() в ваш код, чтобы отслеживать значения переменных или логику выполнения

Сетевые запросы (Network)

Применение:

• Просмотр запросов Вы можете увидеть, какие ресурсы загружаются (изображения, скрипты, стили), а также какой статус ответа от сервера
• Анализ времени отклика Это поможет определить, какие запросы занимают больше времени, что может повлиять на производительность страницы

Отладка JavaScript (Sources)

Применение:

• Точки остановки Вы можете поставить точки останова (breakpoints) в коде, чтобы при его выполнении программа остановилась, и вы могли исследовать переменные и логику
• Пошаговое выполнение Это помогает вам отслеживать, как выполняется код, и находить ошибки

Проверка адаптивности (Device Mode)

Применение:

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

Производительность (Performance)

Применение:

• Запись производительности Вы можете начать запись производительности и увидеть, сколько времени тратится на различные этапы рендеринга страницы, что поможет найти узкие места
• Анализ времени загрузки Узнайте, сколько времени занимает загрузка ресурсов и их обработка

Анализ стилей и вычислений (Computed Styles)

Применение:

• Вкладка "Computed" Показывает окончательные стили для выбранного элемента, включая значения, которые могут быть получены через наследование или с помощью медиазапросов