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

Media Queries (медиа-запросы) - это технология в CSS, которая позволяет применять разные стили в зависимости от характеристик устройства, таких как:

Ширина и высота экрана
Ориентация (горизонтальная/вертикальная)
Разрешение
Тип устройства и др.

Базовый синтаксис

@media [тип устройства] [и] (условие) {
  /* CSS-правила */
}

По ширине экрана

/* Для экранов шириной до 768px (мобильные устройства) */
@media (max-width: 768px) {
  body {
    background-color: lightblue;
    font-size: 14px;
  }
}

/* Для экранов шириной от 769px до 1024px (планшеты) */
@media (min-width: 769px) and (max-width: 1024px) {
  body {
    background-color: lightgreen;
    font-size: 16px;
  }
}

/* Для экранов шириной от 1025px (десктоп) */
@media (min-width: 1025px) {
  body {
    background-color: lightcoral;
    font-size: 18px;
  }
}

По ориентации устройства

/* Портретная ориентация (высота больше ширины) */
@media (orientation: portrait) {
  .header {
    height: 80px;
  }
}

/* Ландшафтная ориентация (ширина больше высоты) */
@media (orientation: landscape) {
  .header {
    height: 60px;
  }
}

По типу устройства

/* Только для экранов */
@media screen {
  body {
    font-family: Arial, sans-serif;
  }
}

/* Только для печати */
@media print {
  .navigation,
  .ads {
    display: none;
  }
  
  body {
    font-size: 12pt;
    color: black;
  }
}

Темная тема

/* Поддержка темной темы системы */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #ffffff;
  }
}

/* Поддержка светлой темы системы */
@media (prefers-color-scheme: light) {
  body {
    background-color: #ffffff;
    color: #000000;
  }
}

Подход Mobile First

Mobile First - это стратегия, при которой вы сначала пишете стили для мобильных устройств, а затем с помощью min-width добавляете стили для более крупных экранов.

Преимущества подхода Mobile First:

Улучшает производительность на мобильных
Заставляет думать о самом важном контенте
Проще масштабировать вверх, чем упрощать вниз

/* Mobile First стили (базовые) */
.container {
  width: 100%;
  padding: 10px;
}

/* Планшеты */
@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
}

/* Десктоп */
@media (min-width: 1024px) {
  .container {
    width: 980px;
  }
}

/* Большие экраны */
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

Desktop First

Desktop First — это подход к адаптивному дизайну, при котором сначала создаются стили для десктопных версий сайта, а затем с помощью медиа-запросов max-width адаптируются под планшеты и мобильные устройства.

/* Десктоп стили (базовые) */
.container {
  width: 1200px;
  margin: 0 auto;
}

/* Планшеты */
@media (max-width: 1024px) {
  .container {
    width: 95%;
  }
}

/* Мобильные устройства */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 10px;
  }
}