Media Query — это механизм в CSS, который позволяет применять разные стили в зависимости от типа устройства, ширины экрана, ориентации и других характеристик. Это основа адаптивной (responsive) верстки, благодаря которой сайты одинаково удобно выглядят на телефоне, планшете, ноутбуке и телевизоре.

Зачем нужен Media Query?

• Чтобы подстраивать дизайн под разные экраны
• Чтобы создавать мобильные версии сайтов без отдельных файлов
• Чтобы учитывать ориентацию экрана — вертикальную или горизонтальную
• Для поддержки высокочётких (Retina) дисплеев

Синтаксис:

@media (условие) {

/* CSS-стили */

}

Примеры популярных запросов:

/* Для мобильных */

@media (max-width: 600px) {

body {

background-color: lightblue;

}

}

/* Для планшетов */

@media (min-width: 601px) and (max-width: 1024px) {

body {

background-color: lightgreen;

}

}

/* Для больших экранов */

@media (min-width: 1025px) {

body {

background-color: lightgray;

}

}

Часто используемые свойства:

• max-width — максимальная ширина экрана
• min-width — минимальная ширина
• orientation — ориентация (portrait, landscape)
• resolution — разрешение экрана
• aspect-ratio — соотношение сторон

Пример из практики:

.container {

width: 100%;

}

@media (min-width: 768px) {

.container {

width: 750px;

}

}

@media (min-width: 1200px) {

.container {

width: 1140px;

}

}

Почему это важно:

• Сайты с media queries выглядят профессионально
• Улучшает удобство для пользователей
• Повышает рейтинг SEO (поисковые системы предпочитают адаптивные сайты)
• Не требует создания отдельной мобильной версии сайта