Медиа-запросы CSS: правильная адаптация сайта под разные устройства

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

Синтаксис медиа запросов CSS выглядит следующим образом:

@media only screen and (max-width: 600px) {
  /* CSS стили для устройств с шириной экрана не более 600 пикселей */
}

В коде выше мы используем `@media` для начала определения медиа запроса, затем указываем тип `screen`, который обозначает, что мы будем задавать стили для экрана. Затем мы указываем условие, в скобках, говорящее о том, для какой ширины экрана будут применяться определенные стили - в данном случае не более 600 пикселей. После этого мы заключаем стили в фигурные скобки `{}`, которые будут применяться только для указанной ширины экрана.

Например, если мы хотим, чтобы на мобильных устройствах были сокращены некоторые элементы веб-сайта, мы можем использовать следующий код:

@media only screen and (max-width: 768px) {
  .sidebar {
    display: none;
  }
  .logo {
    width: 50%;
  }
}

Этот код добавит стиль `display: none` для класса `.sidebar`, который скроет боковую панель на устройствах с шириной экрана не более 768 пикселей. Кроме того, на мобильных устройствах мы уменьшим ширину логотипа, применяя стиль `width: 50%` для класса `.logo`.

Таким образом, использование медиа запросов CSS позволяет создавать адаптивный дизайн, который будет отлично смотреться на любых устройствах, предоставляя более удобное и интуитивно понятное пользовательское взаимодействие с сайтом.