Как работать с media в css

Media Query — это инструмент в CSS, который позволяет управлять стилями в зависимости от характеристик устройства, на котором отображается веб-страница. Например, вы можете изменить расположение, размер и цвет элементов на странице в зависимости от размера экрана устройства.

Вот пример использования Media Query:

/* стили для устройств с шириной экрана менее 768 пикселей */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    h1 {
        font-size: 24px;
    }
}

/* стили для устройств с шириной экрана более 768 пикселей */
@media (min-width: 768px) {
    body {
        font-size: 16px;
    }
    h1 {
        font-size: 36px;
    }
}

В этом примере определены два Media Query, один для устройств с шириной экрана менее 768 пикселей, а другой для устройств с шириной экрана более 768 пикселей.

Каждый Media Query начинается с @media, после которого следует условие запроса (в данном случае max-width и min-width). Затем определяются стили, которые будут применяться к элементам на странице в случае, если выполняются условия запросов.

В первом Media Query для устройств с шириной экрана менее 768 пикселей, изменен размер шрифта для body на 14 пикселей, а для заголовка h1 — на 24 пикселя.

Во втором Media Query для устройств с шириной экрана более 768 пикселей, размер шрифта для body увеличен до 16 пикселей, а для заголовка h1 — до 36 пикселей.

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

Media Query также может быть использовано в сочетании с другими CSS-свойствами, такими как display, position, и т.д., для создания адаптивных макетов, которые будут работать на разных устройствах.