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, и т.д., для создания адаптивных макетов, которые будут работать на разных устройствах.
