Что такое media queries и какие задачи они решают?

Question

Media queries позволяют применять CSS-стили в зависимости от параметров устройства.
Чаще всего они используются для адаптивной верстки.
С их помощью можно менять layout под разные экраны.
Это базовый инструмент responsive design.

YeaHub · Accepted Answer

Современные сайты должны корректно отображаться на устройствах с разными характеристиками. Media queries решают эту задачу на уровне CSS.ОпределениеMedia queries — это механизм CSS, который позволяет применять стили в зависимости от условий среды отображения.Какие задачи решают media queriesMedia queries используются для:Адаптации интерфейса под разные размеры экрановИзменения layout на мобильных устройствахУправления отображением элементовОптимизации пользовательского опытаПример использования@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}
Типичный сценарийДесктопная версияПланшетМобильная версияMedia queries позволяют управлять этими состояниями без JavaScript.ВыводMedia queries — основной инструмент адаптивной верстки. Они позволяют одному CSS-файлу обслуживать разные устройства.