Логотип YeaHub

База вопросов

Собеседования

Тренажёр

База ресурсов

Обучение

Навыки

Войти

Выбери, каким будет IT завтра — вместе c нами!

YeaHub — это полностью открытый проект, призванный объединить и улучшить IT-сферу. Наш исходный код доступен для просмотра на GitHub. Дизайн проекта также открыт для ознакомления в Figma.

© 2026 YeaHub

Документы

Медиа

Назад
Вопрос про CSS: media, queries

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

Вопрос проверяет понимание адаптивной верстки и механизмов изменения стилей под разные устройства.

Короткий ответ

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

Длинный ответ

Современные сайты должны корректно отображаться на устройствах с разными характеристиками. Media queries решают эту задачу на уровне CSS.

Определение

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

Какие задачи решают media queries

Media queries используются для:

  1. Адаптации интерфейса под разные размеры экранов

  2. Изменения layout на мобильных устройствах

  3. Управления отображением элементов

  4. Оптимизации пользовательского опыта

Пример использования

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

Типичный сценарий

  • Десктопная версия

  • Планшет

  • Мобильная версия

Media queries позволяют управлять этими состояниями без JavaScript.

Вывод

Media queries — основной инструмент адаптивной верстки. Они позволяют одному CSS-файлу обслуживать разные устройства.

Уровень

  • Рейтинг:

    5

  • Сложность:

    4

Навыки

  • CSS

    CSS

Ключевые слова

#media

#queries

Подпишись на React Developer в телеграм