День 36 | Адаптируем экраны под планшеты

Адаптация для планшетов

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

Breakpoints (точки перелома)

Breakpoints — это размеры экрана, при которых меняется макет. Стандартные breakpoints:

// В _variables.scss
$breakpoint-tablet: 1024px;
$breakpoint-mobile: 768px;

Адаптация основных блоков

// Планшетные стили
@media (max-width: $breakpoint-tablet) {
  .container {
    padding: 0 30px;
  }
  
  .cards-grid {
    grid-template-columns: repeat(2, 1fr); // 2 колонки вместо 3
  }
  
  .header__nav {
    display: none; // Скрываем обычное меню
  }
  
  .burger-menu {
    display: block; // Показываем бургер-меню
  }
  
  .hero__title {
    font-size: 36px; // Уменьшаем размер заголовка
  }
}

Бургер-меню на JavaScript

На планшетах и мобильных обычное горизонтальное меню не помещается. Нужно бургер-меню:

class MobileMenu {
  constructor() {
    this.burger = document.querySelector('.burger-menu');
    this.menu = document.querySelector('.mobile-menu');
    this.body = document.body;
    
    this.init();
  }
  
  init() {
    this.burger.addEventListener('click', () => {
      this.toggle();
    });
    
    // Закрытие при клике вне меню
    document.addEventListener('click', (e) => {
      if (!this.menu.contains(e.target) && !this.burger.contains(e.target)) {
        this.close();
      }
    });
  }
  
  toggle() {
    this.menu.classList.toggle('active');
    this.burger.classList.toggle('active');
    this.body.style.overflow = this.menu.classList.contains('active') ? 'hidden' : '';
  }
  
  close() {
    this.menu.classList.remove('active');
    this.burger.classList.remove('active');
    this.body.style.overflow = '';
  }
}

Практическое задание

1. Определите breakpoints для планшетов
2. Адаптируйте Grid и Flexbox сетки
3. Измените размеры шрифтов
4. Создайте бургер-меню
5. Адаптируйте все блоки сайта
6. Протестируйте на планшете или в DevTools