1. Используйте относительные единицы измерения

  • em, rem, % вместо px: Относительные единицы автоматически адаптируются к размеру экрана, шрифта или контейнера.
    • rem: относительно корневого шрифта (html).
    • em: относительно размера шрифта родителя.
    • %: относительно родительского блока.

Пример:

 

2. Мобильная адаптивность

Медиа-запросы (CSS Media Queries)

  • Используйте медиа-запросы (@media) для изменения макета и стилей на разных устройствах.
  • Пример:

Совет: Создавайте дизайн от меньшего к большему ("mobile-first") — начните с минимальных размеров экрана и добавляйте стили для больших устройств.

Оптимизация производительности

  • Используйте max-width вместо width для улучшения адаптивности.
  • Минимизируйте количество вложенных контейнеров.
  • Используйте Flexbox или Grid для управления макетом.
  • Используйте CSS-спрайты для уменьшения количества изображений.

3. Используйте гибкие сетки (Flexbox и Grid)

Flexbox и CSS Grid — мощные инструменты для создания отзывчивых макетов.

3. Управление размещением контейнеров

Flexbox

Flexbox используется для управления расположением контейнеров и элементов внутри них.

Основные свойства Flexbox:

  • display: flex; — превращает контейнер в flex-контейнер.
  • justify-content — выравнивание элементов по горизонтали (flex-start, center, space-between).
  • align-items — выравнивание элементов по вертикали (flex-start, center, baseline).
  • flex-wrap — управляет переносом строк (nowrap, wrap).

  • Flexbox:
    • Идеален для однонаправленных макетов (в строку или столбец).
    • Подходит для создания адаптивных навигационных меню, карточек, списков.

Пример Flexbox:

Grid используется для управления макетом страниц. Используется для сложных макетов (например, галерей или таблиц).

Основные свойства Grid:

  • display: grid; — превращает контейнер в grid-контейнер.
  • grid-template-columns — определяет количество и размеры колонок.
  • grid-template-rows — определяет количество и размеры строк.
  • gap — определяет расстояние между строками и колонками

Пример Grid:

4. Оптимизируйте изображения

  • Используйте изображения в формате <picture> для подгрузки версий, подходящих под размер экрана:

  • Компрессируйте изображения и используйте современные форматы: WebP, AVIF.
  • Ограничьте максимальную ширину изображения: max-width: 100%;.

5. Используйте функции clamp() и min()/max()

Функции clamp(), min(), max() помогают адаптировать размеры элементов без сложных медиазапросов.

Пример clamp():

6. Ограничьте ширину контейнера

Для улучшения читабельности ограничьте максимальную ширину текста.

Пример:

7. Реализуйте мобильное меню (бургер-меню)

Скрывайте большое меню на маленьких экранах и заменяйте его бургер-меню.

Пример:

8. Используйте подход "относительные размеры"

Используйте %, vw, vh для размеров вместо фиксированных значений.

Пример:

9. Оптимизируйте кнопки и зоны для нажатий

На мобильных устройствах кнопки и элементы управления должны быть удобными для нажатия.

Пример:

10. Проверьте работу с сенсорным вводом

Добавьте свойства для улучшения взаимодействия с сенсорными экранами:

11. Учитывайте высоту адресной строки (для мобильных)

Используйте 100dvh вместо 100vh, чтобы учесть высоту адресной строки на мобильных браузерах:

12. Используйте шрифты с адаптацией

  • Настройте размер шрифта с помощью медиазапросов или функций (clamp()).
  • Поддерживайте доступность, используя относительные единицы (em, rem).

13. Тестируйте в реальных условиях

Проверяйте:

  • На устройствах с разными размерами экранов.
  • В разных браузерах.
  • В эмуляторах и на реальных устройствах.

Часто встречающиеся ошибки и советы

Последнее изменение: понедельник, 17 февраля 2025, 14:42